تجارب كود زكر وانثي

عند التمعن في الكود المقدم من كونان
بخصوص لونك المفضل وجدت ان الكود المناسب

لنسخه انفينشن هيه كالتالي
الكود تم استعماله للنسخه الثالثه

وانا استعملته للنسخه انفينشن

الكود:

.ذكر {
    border-bottom: 16px solid #2196f3!important;
    border-left: 1px solid #2196f3!important;
    border-radius: 3px;
    border-right: 1px solid #2196f3!important;
    border-top: 16px solid #2196f3!important;
    padding: 60px 3px 3px!important;
    position: relative;
}

.انثى {
    border-bottom: 16px solid #e91e63!important;
    border-left: 1px solid #e91e63!important;
    border-radius: 3px;
    border-right: 1px solid #e91e63!important;
    border-top: 16px solid #e91e63!important;
    padding: 60px 3px 3px!important;
    position: relative;
}

 .ذكر dl > dd:nth-child(6) {
    background-color: #fff;
    border-bottom: 1px dotted #2196f3;
    border-radius: 5px 5px 5px 5px;
    border-right: 3px solid #2196f3;
}
.انثى dl > dd:nth-child(6) {
    background-color: #fff;
    border-bottom: 1px dotted #e91e63;
    border-radius: 5px 5px 5px 5px;
    border-right: 3px solid #e91e63;
}
.انثى dl > dd:nth-child(6):before {
    display: flex;
    color: white;
    padding: 4px;
    display: flex;
    content: "بيانات العضوه";
    justify-content: center;
    background: #e91e63;
}
.ذكر dl > dd:nth-child(6):before {
    display: flex;
    color: white;
    padding: 4px;
    display: flex;
    content: "بيانات العضو";
    justify-content: center;
    background: #2196f3;
}

.ذكر.postprofile:before {
    text-align: center;
    background: #607d8b;
    border-radius: 33px;
    color: beige;
    content: "غير متواجد على المنتدى";
}
 .انثى.postprofile:before {
    text-align: center;
    background: #607d8b;
    border-radius: 33px;
    color: beige;
    content: "غير متواجدة على المنتدى";
}
 div.post.online .postprofile.ذكر:before {
  text-align: center;
    background: #2196f3;
    border-radius: 33px;
    color: beige;
    content: "متواجد على المنتدى";
}
 div.post.online .postprofile.انثى:before {
  text-align: center;
    background: #e91e63;
    border-radius: 33px;
    color: beige;
    content: "متواجدة على المنتدى";
}
div.post .postprofile:before {
    font-size: 14px;
    padding: 6px;
    left: 7px;
    position: absolute;
    right: 7px;
    top: 10px;
    z-index: 2;
    font-weight: bold;
}
.postprofile .label {
    padding-right: 6px;
    font-weight: 500;
}

.postprofile {
    border-bottom: 16px solid #607d8b;
    border-left: 1px solid #607d8b;
    border-radius: 3px;
    border-right: 1px solid #607d8b;
    border-top: 16px solid #607d8b;
    padding: 60px 3px 3px!important;
      position: relative!important;
}
 


.postprofile .label {
    padding-left: 3px;
    font-weight: 500;
}
 
.blue {
    border-bottom: 16px solid #3e459c!important;
    border-left: 1px solid #3e459c!important;
    border-right: 1px solid #3e459c!important;
    border-top: 16px solid #3e459c!important;
}
.grey {
    border-bottom: 16px solid #a0a09a!important;
    border-left: 1px solid #a0a09a!important;
    border-right: 1px solid #a0a09a!important;
    border-top: 16px solid #a0a09a!important;
}
.green {
    border-bottom: 16px solid #42b649!important;
    border-left: 1px solid #42b649!important;
    border-right: 1px solid #42b649!important;
    border-top: 16px solid #42b649!important;
}
.yellow {
    border-bottom: 16px solid #ede816!important;
    border-left: 1px solid #ede816!important;
    border-right: 1px solid #ede816!important;
    border-top: 16px solid #ede816!important;
}
.purple {
    border-bottom: 16px solid #aa4399!important;
    border-left: 1px solid #aa4399!important;
    border-right: 1px solid #aa4399!important;
    border-top: 16px solid #aa4399!important;
}
 
 
 div.post.online .postprofile.undefined:before {
  background: #;!important;
}
 div.post.online .postprofile.purple:before {
  background: #aa4399!important;
}
 div.post.online .postprofile.grey:before {
  background: #a0a09a;!important;
}
 div.post.online .postprofile.blue:before {
  background: #3e459c!important;
}
 div.post.online .postprofile.green:before {
  background: #42b649;!important;
}
 div.post.online .postprofile.yellow:before {
  background: #ede816!important;
}
 
.undefined dl > dd:nth-child(6):before {
  background: #;!important;
}
.purple dl > dd:nth-child(6):before {
  background: #aa4399!important;
}
.grey dl > dd:nth-child(6):before {
  background: #a0a09a;!important;
}
.blue dl > dd:nth-child(6):before {
  background: #3e459c!important;
}
.green dl > dd:nth-child(6):before {
  background: #42b649;!important;
}
.yellow dl > dd:nth-child(6):before {
  background: #ede816!important;
}
.undefined dl > dd:nth-child(6) {
    border-bottom: 1px dotted #;!important;
    border-right: 2px solid #;!important;
}
.purple dl > dd:nth-child(6) {
    border-bottom: 1px dotted #aa4399!important;
    border-right: 2px solid #aa4399!important;
}
.grey dl > dd:nth-child(6) {
    border-bottom: 1px dotted #a0a09a;!important;
    border-right: 2px solid #a0a09a;!important;
}
.blue dl > dd:nth-child(6) {
    border-bottom: 1px dotted #3e459c!important;
    border-right: 2px solid #3e459c!important;
}
.green dl > dd:nth-child(6) {
    border-bottom: 1px dotted #42b649;!important;
    border-right: 2px solid #42b649;!important;
}
.yellow dl > dd:nth-child(6) {
    border-bottom: 1px dotted #ede816!important;
    border-right: 2px solid #ede816!important;
}
 
.Orange {
    border-bottom: 16px solid #ffa200!important;
    border-left: 1px solid #ffa200!important;
    border-right: 1px solid #ffa200!important;
    border-top: 16px solid #ffa200!important;
}

.Orange dl > dd:nth-child(6) {
 border-bottom: 1px dotted #ffa200!important;
    border-right: 2px solid #ffa200!important;
}
 div.post.online .postprofile.Orange:before {
  background: #ffa200!important;
}
.Orange dl > dd:nth-child(6):before {
  background: #ffa200!important;
  color: #fff;
}
.Pink {
    border-bottom: 16px solid #ffc0cb!important;
    border-left: 1px solid #ffc0cb!important;
    border-right: 1px solid #ffc0cb!important;
    border-top: 16px solid #ffc0cb!important;
}

.Pink dl > dd:nth-child(6) {
 border-bottom: 1px dotted #ffc0cb!important;
    border-right: 2px solid #ffc0cb!important;
}
 div.post.online .postprofile.Pink:before {
  background: #ffc0cb!important;
}
.Pink dl > dd:nth-child(6):before {
  background: #ffc0cb!important;
  color: #000;
}
.black {
    border-bottom: 16px solid #000000!important;
    border-left: 1px solid #000000!important;
    border-right: 1px solid #000000!important;
    border-top: 16px solid #000000!important;
}

.black dl > dd:nth-child(6) {
 border-bottom: 1px dotted #000000!important;
    border-right: 2px solid #000000!important;
}
 div.post.online .postprofile.black:before {
  background: #000000!important;
}
.black dl > dd:nth-child(6):before {
  background: #000000!important;
 color: #fff;
}
.red {
    border-bottom: 16px solid #e90000!important;
    border-left: 1px solid #e90000!important;
    border-right: 1px solid #e90000!important;
    border-top: 16px solid #e90000!important;
}

.red dl > dd:nth-child(6) {
 border-bottom: 1px dotted #e90000!important;
    border-right: 2px solid #e90000!important;
}
 div.post.online .postprofile.red:before {
  background: #e90000!important;
}
.red dl > dd:nth-child(6):before {
  background: #e90000!important;
 color: #fff;
}
.LightCoral {
    background: #f6f6f6!important;
    border-bottom: 16px solid #f08080!important;
    border-left: 1px solid #f08080!important;
    border-right: 1px solid #f08080!important;
    border-top: 16px solid #f08080!important;
}

.LightCoral dl > dd:nth-child(6) {
 border-bottom: 1px dotted #f08080!important;
    border-right: 2px solid #f08080!important;
}
 div.post.online .postprofile.LightCoral:before {
  background: #f08080!important;
}
.LightCoral dl > dd:nth-child(6):before {
  background: #f08080!important;
 color: #fff;
}
.Wisteria {
    border-bottom: 16px solid #c6aec7!important;
    border-left: 1px solid #c6aec7!important;
    border-right: 1px solid #c6aec7!important;
    border-top: 16px solid #c6aec7!important;
}

.Wisteria dl > dd:nth-child(6) {
 border-bottom: 1px dotted #c6aec7!important;
    border-right: 2px solid #c6aec7!important;
}
 div.post.online .postprofile.Wisteria:before {
  background: #c6aec7!important;
}
.Wisteria dl > dd:nth-child(6):before {
  background: #c6aec7!important;
 color: #fff;
}
.SlateBlue {
    border-bottom: 16px solid #6a5acd!important;
    border-left: 1px solid #6a5acd!important;
    border-right: 1px solid #6a5acd!important;
    border-top: 16px solid #6a5acd!important;
}

.SlateBlue dl > dd:nth-child(6) {
 border-bottom: 1px dotted #6a5acd;!important;
    border-right: 2px solid #6a5acd;!important;
}
 div.post.online .postprofile.SlateBlue:before {
  background: #6a5acd!important;
}
.SlateBlue dl > dd:nth-child(6):before {
  background: #6a5acd!important;
 color: #fff;
}
.Indigo {
    border-bottom: 16px solid #4b0082!important;
    border-left: 1px solid #4b0082!important;
    border-right: 1px solid #4b0082!important;
    border-top: 16px solid #4b0082!important;
}

.Indigo dl > dd:nth-child(6) {
 border-bottom: 1px dotted #4b0082;!important;
    border-right: 2px solid #4b0082;!important;
}
 div.post.online .postprofile.Indigo:before {
  background: #4b0082!important;
}
.Indigo dl > dd:nth-child(6):before {
  background: #4b0082!important;
 color: #fff;
}


dl > dd:nth-child(6) {
    border-right: solid #607d8b 2px;
    background: #ffffff;
    margin-left: 5px;
}