sublist.css (2782B)
1 .sub-list-full { 2 display: block; 3 width: 100%; 4 font-size: 0; 5 } 6 7 .sub-list-full > .item { 8 display: inline-block; 9 vertical-align: top; 10 width: calc(50% - 5px); 11 font-size: 0; 12 margin-bottom: 15px; 13 margin-right: 10px; 14 text-decoration: none; 15 } 16 17 .sub-list-full > .item:nth-child(even) { 18 margin-right: 0; 19 } 20 21 .sub-list-full > .item > .icon { 22 display: inline-block; 23 vertical-align: middle; 24 width: 60px; 25 height: 60px; 26 background-color: #9b59b6; 27 background-size: contain; 28 background-position: center center; 29 background-repeat: no-repeat; 30 margin-right: 15px; 31 -webkit-border-radius: 100%; 32 -moz-border-radius: 100%; 33 border-radius: 100%; 34 text-decoration: none; 35 } 36 37 .sub-list-full > .item > .right { 38 display: inline-block; 39 vertical-align: middle; 40 width: calc(100% - 75px); 41 font-size: 14px; 42 } 43 44 .sub-list-full > .item > .right > .subname { 45 color: #000; 46 font-weight: bold; 47 margin-bottom: 5px; 48 text-decoration: none; 49 font-size: 16px; 50 display: inline-block; 51 white-space: nowrap; 52 overflow: hidden; 53 text-overflow: ellipsis; 54 width: 100%; 55 } 56 57 .sub-list-full > .item > .right > .subscribers { 58 color: #999; 59 } 60 61 .sub-list-full > .item > .right > .description { 62 font-size: 16px; 63 color: #666; 64 margin-top: 5px; 65 height: 18px; 66 line-height: 18px; 67 white-space: nowrap; 68 overflow: hidden; 69 text-overflow: ellipsis; 70 width: 100%; 71 } 72 73 .sub-list { 74 display: block; 75 width: 100%; 76 font-size: 0; 77 } 78 79 .sub-list > .item { 80 display: inline-block; 81 vertical-align: top; 82 width: 220px; 83 font-size: 0; 84 margin-bottom: 10px; 85 margin-right: 10px; 86 text-decoration: none; 87 text-align: left; 88 } 89 90 .sub-list > .item > .icon { 91 display: inline-block; 92 vertical-align: middle; 93 width: 40px; 94 height: 40px; 95 background-color: #9b59b6; 96 background-size: contain; 97 background-position: center center; 98 background-repeat: no-repeat; 99 margin-right: 10px; 100 -webkit-border-radius: 100%; 101 -moz-border-radius: 100%; 102 border-radius: 100%; 103 } 104 105 .sub-list > .item > .icon.is_mod { 106 position: relative; 107 } 108 109 .sub-list > .item > .icon.is_mod:after { 110 position: absolute; 111 bottom: -3px; 112 right: -3px; 113 width: 20px; 114 height: 20px; 115 border: 1px solid #fff; 116 background-color: #2ecc71; 117 content: "M"; 118 text-align: center; 119 line-height: 20px; 120 -webkit-border-radius: 3px; 121 font-size: 12px; 122 color: #fff; 123 } 124 125 .sub-list > .item > .right { 126 display: inline-block; 127 vertical-align: middle; 128 width: calc(100% - 50px); 129 font-size: 14px; 130 } 131 132 .sub-list > .item > .right > .subname { 133 color: #000; 134 font-weight: bold; 135 margin-bottom: 5px; 136 } 137 138 .sub-list > .item > .right > .subscribers { 139 color: #999; 140 }