style.css (7756B)
1 .redux-templates-collection-details-view { 2 padding: 40px 22.5px 60px; 3 width: 100%; 4 justify-content: center; 5 position: relative; 6 display: flex; } 7 .redux-templates-collection-details-view .redux-templates-collection-details-left { 8 width: 600px; 9 margin: 0 37px 0 17px; } 10 .redux-templates-collection-details-view .redux-templates-collection-details-left .details-back { 11 height: 32px; 12 line-height: 20px; 13 color: #818a91; 14 font-size: 15px; 15 font-weight: 600; 16 display: -webkit-inline-box; 17 display: -ms-inline-flexbox; 18 display: inline-flex; 19 -webkit-box-align: center; 20 -ms-flex-align: center; 21 align-items: center; 22 cursor: pointer; 23 margin-bottom: 20px; 24 -webkit-transition: color 0.1s ease; 25 transition: color 0.1s ease; } 26 .redux-templates-collection-details-view .redux-templates-collection-details-left .details-preview { 27 transition: all linear 1s; 28 background-position: center top; 29 background-size: cover; 30 background-repeat: no-repeat; 31 height: 84.71%; } 32 .redux-templates-collection-details-view .redux-templates-collection-details-left .details-preview:hover { 33 background-position: center bottom; 34 background-size: cover; } 35 .redux-templates-collection-details-view .redux-templates-collection-details-right { 36 width: 520px; } 37 .redux-templates-collection-details-view .redux-templates-collection-details-right .details-title { 38 height: 30px; 39 display: -webkit-box; 40 display: -ms-flexbox; 41 display: flex; 42 -webkit-box-align: center; 43 -ms-flex-align: center; 44 align-items: center; 45 -webkit-box-pack: justify; 46 -ms-flex-pack: justify; 47 justify-content: space-between; 48 padding: 2px 25px 0 10px; 49 margin-bottom: 20px; } 50 .redux-templates-collection-details-view .redux-templates-collection-details-right .details-title h3 { 51 color: rgba(3, 8, 15, 0.92); 52 font-size: 28px; 53 font-weight: 600; 54 line-height: 34px; 55 margin: 0; } 56 .redux-templates-collection-details-view .redux-templates-collection-details-right .details-title span { 57 color: #818a91; 58 font-size: 13px; 59 font-weight: 600; 60 line-height: 16px; } 61 .redux-templates-collection-details-view .redux-templates-collection-details-right .details-list { 62 height: 84.71%; } 63 .redux-templates-collection-details-view .redux-templates-collection-details-right .details-list .details-inner { 64 height: 100%; 65 overflow-y: auto; } 66 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select { 67 width: 150px; 68 height: 150px; 69 overflow: hidden; 70 margin: 0 8px 15px; 71 border-radius: 3px; 72 -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); 73 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); 74 position: relative; 75 display: inline-block; 76 cursor: pointer; } 77 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select::before, .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select::after { 78 content: ""; 79 width: 100%; 80 height: 100%; 81 position: absolute; 82 top: 0; 83 left: 0; 84 border-radius: 3px; 85 pointer-events: none; 86 opacity: 0; 87 -webkit-transition: opacity 0.1s ease-in-out; 88 transition: opacity 0.3s ease-in-out; 89 box-sizing: border-box; } 90 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select::before { 91 border: 3px solid #3dbfe8; 92 z-index: 2; } 93 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select::after { 94 border: 3px solid #ececec; 95 z-index: 1; } 96 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select .detail-image { 97 width: 100%; 98 height: 150px; 99 background-repeat: no-repeat; 100 background-size: cover; 101 border: 1px solid #ececec; 102 position: relative; } 103 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select .detail-image .pro, 104 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select .detail-image .install { 105 position: absolute; 106 background: #f00; 107 padding: 2px 3px; 108 border-radius: 3px; 109 color: #fff; 110 font-size: 9px; 111 right: 5px; 112 top: 5px; 113 text-transform: uppercase; 114 line-height: 1; } 115 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select .detail-image .pro { 116 background: #f00; } 117 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select .detail-image .install { 118 background: #f2a848; } 119 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select .detail-label { 120 border-top: 1px solid #f2f4f7; 121 width: 100%; 122 height: 30px; 123 opacity: 1; 124 background-color: rgba(255, 255, 255, 0.9); 125 position: absolute; 126 bottom: 0; 127 left: 0; 128 color: #23282d; 129 font-family: pn, "Open Sans", Arial, sans-serif; 130 font-size: 13px; 131 font-weight: 600; 132 line-height: 30px; 133 padding-left: 10px; 134 -webkit-transition: all 0.3s ease-in-out; 135 transition: all 0.3s ease-in-out; } 136 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select:hover::before, .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select:hover::after { 137 opacity: 1; } 138 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select.detail-select-active::before, .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select.detail-select-active::after, 139 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select.detail-select-active .detail-label { 140 opacity: 1; } 141 .redux-templates-collection-details-view .redux-templates-collection-details-right .detail-select.detail-select-active .detail-label { 142 background-color: rgba(61, 192, 232, 0.9); 143 color: rgba(3, 8, 15, 0.92); } 144 .redux-templates-collection-details-view .redux-templates-collection-details-footer { 145 width: 100%; 146 height: 60px; 147 background: #fff; 148 position: absolute; 149 bottom: 0; 150 left: 0; 151 z-index: 2; } 152 .redux-templates-collection-details-view .redux-templates-collection-details-footer .footer-grid { 153 width: 100%; 154 padding: 0 10px; 155 height: 100%; 156 margin: auto; 157 display: flex; 158 align-items: center; 159 justify-content: flex-end; } 160 .redux-templates-collection-details-view .redux-templates-collection-details-footer .import-button { 161 margin-left: 11.5px; 162 background-color: #3dbfe8; 163 color: #fff; 164 font-family: pn, "Open Sans", Arial, sans-serif; 165 font-size: 15px; 166 font-weight: 600; 167 line-height: 18px; 168 padding: 9px 32px; 169 border-radius: 3px; 170 cursor: pointer; 171 -webkit-transition: background-color 150ms linear; 172 transition: background-color 150ms linear; } 173 .redux-templates-collection-details-view .redux-templates-collection-details-footer .import-button:hover { 174 background: rgba(61, 191, 232, 0.8); } 175 176 /*# sourceMappingURL=style.css.map */