CIENCIA, TECNOLOGÍA E INNOVACIÓN EN BOLIVIA - Vicerrectorado

1<style> 

2@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); 

3@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); 

4 

5@font-face { 

6font-family: 'Nexa'; 

7src: url('/o/umsa-theme/fonts/Nexa-Bold.otf') format('opentype'); 

8font-weight: normal; 

9font-style: normal; 

10} 

11 

12.lib-struct-section { 

13width: 100%; 

14margin: 20px 0; 

15box-sizing: border-box; 

16} 

17 

18.lib-struct-card { 

19background-color: #ffffff; 

20border-radius: 18px; 

21border: 1px solid #dbeafe; 

22box-shadow: 0 6px 25px rgba(2, 73, 102, 0.06); 

23overflow: hidden; 

24display: flex; 

25flex-direction: row; 

26padding: 24px; 

27gap: 24px; 

28transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 

29box-sizing: border-box; 

30} 

31 

32.lib-struct-card:hover { 

33box-shadow: 0 16px 35px rgba(2, 73, 102, 0.15); 

34border-color: #024966; 

35} 

36 

37.lib-struct-img-container { 

38width: 390px; 

39min-width: 390px; 

40height: 540px; 

41background-color: #f0f4f8; 

42display: flex; 

43align-items: center; 

44justify-content: center; 

45overflow: hidden; 

46position: relative; 

47padding: 10px; 

48box-sizing: border-box; 

49border-radius: 12px; 

50border: 1px solid #e2e8f0; 

51cursor: pointer; 

52} 

53 

54.lib-struct-img-container img.lib-struct-img { 

55max-width: 100% !important; 

56max-height: 100% !important; 

57width: auto !important; 

58height: auto !important; 

59object-fit: cover !important; 

60display: block !important; 

61border-radius: 8px !important; 

62transition: transform 0.5s ease !important; 

63} 

64 

65.lib-struct-img-container:hover .lib-struct-img { 

66transform: scale(1.05); 

67} 

68 

69.lib-struct-content { 

70display: flex; 

71flex-direction: column; 

72flex-grow: 1; 

73background: transparent; 

74} 

75 

76.lib-struct-title { 

77font-family: 'Nexa', 'Inter', sans-serif; 

78font-size: 2.15rem; 

79font-weight: 700; 

80line-height: 1.45; 

81margin-bottom: 14px; 

82} 

83 

84.lib-struct-title a { 

85color: #024966; 

86text-decoration: none; 

87transition: color 0.2s ease; 

88display: block; 

89background-image: linear-gradient(currentColor, currentColor); 

90background-position: 0% 100%; 

91background-repeat: no-repeat; 

92background-size: 0% 2px; 

93transition: background-size 0.3s, color 0.3s; 

94cursor: pointer; 

95} 

96 

97.lib-struct-title a:hover { 

98color: #be1f24; 

99background-size: 100% 2px; 

100text-decoration: none; 

101} 

102 

103.lib-struct-details-wrapper { 

104font-family: 'Inter', sans-serif; 

105font-size: 1.58rem; 

106color: #024966; 

107line-height: 1.65; 

108display: flex; 

109flex-direction: column; 

110gap: 14px; 

111margin-top: 10px; 

112} 

113 

114.lib-struct-desc { 

115text-align: justify; 

116color: #024966; 

117font-size: 1.58rem; 

118} 

119 

120.lib-struct-desc .img-umsa-wrapper { 

121position: relative; 

122display: block; 

123margin: 20px auto; 

124max-width: 100%; 

125width: fit-content; 

126overflow: hidden; 

127border-radius: 12px; 

128background-color: #ffffff; 

129border: 1px solid #dbeafe; 

130box-shadow: 0 4px 15px rgba(2, 73, 102, 0.1); 

131padding: 12px; 

132transition: all 0.3s ease; 

133cursor: pointer; 

134} 

135 

136.lib-struct-desc .img-umsa-wrapper:hover { 

137box-shadow: 0 8px 25px rgba(2, 73, 102, 0.2); 

138border-color: #024966; 

139transform: translateY(-2px); 

140} 

141 

142.lib-struct-desc img { 

143display: block; 

144max-width: 100% !important; 

145height: auto !important; 

146border-radius: 10px !important; 

147margin: 0 auto !important; 

148object-fit: contain !important; 

149transition: transform 0.5s ease !important; 

150} 

151 

152.lib-struct-desc .img-umsa-wrapper:hover img { 

153transform: scale(1.02); 

154} 

155 

156.lib-struct-meta-group { 

157display: flex; 

158flex-direction: column; 

159gap: 4px; 

160margin-top: 4px; 

161} 

162 

163.lib-struct-label { 

164font-family: 'Nexa', 'Inter', sans-serif; 

165color: #024966; 

166font-weight: 700; 

167font-size: 1.58rem; 

168} 

169 

170.lib-struct-value { 

171color: #024966; 

172font-size: 1.58rem; 

173} 

174 

175.lib-struct-footer { 

176display: flex; 

177align-items: center; 

178gap: 15px; 

179margin-top: 20px; 

180padding-top: 16px; 

181border-top: 2px solid #edf2f7; 

182flex-wrap: wrap; 

183} 

184 

185.lib-struct-btn { 

186text-decoration: none; 

187color: #ffffff; 

188background-color: #024966; 

189padding: 14px 28px; 

190border-radius: 30px; 

191font-weight: 700; 

192font-size: 1.42rem; 

193transition: all 0.3s ease; 

194box-shadow: 0 4px 12px rgba(2, 73, 102, 0.25); 

195display: inline-flex; 

196align-items: center; 

197gap: 10px; 

198font-family: 'Inter', sans-serif; 

199} 

200 

201.lib-struct-btn:hover { 

202background-color: #01364d; 

203transform: translateY(-2px); 

204box-shadow: 0 6px 18px rgba(2, 73, 102, 0.35); 

205color: #ffffff; 

206text-decoration: none; 

207} 

208 

209.lib-modal-umsa { 

210display: none; 

211position: fixed; 

212z-index: 9999; 

213left: 0; 

214top: 0; 

215width: 100%; 

216height: 100%; 

217background-color: rgba(0, 0, 0, 0.9); 

218align-items: center; 

219justify-content: center; 

220} 

221 

222.lib-modal-umsa img { 

223max-width: 90%; 

224max-height: 90%; 

225border-radius: 10px; 

226object-fit: contain; 

227box-shadow: 0 5px 30px rgba(0,0,0,0.5); 

228} 

229 

230@media screen and (max-width: 768px) { 

231.lib-struct-card { 

232flex-direction: column; 

233align-items: center; 

234padding: 20px; 

235text-align: center; 

236} 

237.lib-struct-img-container { 

238width: 240px; 

239min-width: 240px; 

240height: 330px; 

241margin-bottom: 10px; 

242} 

243.lib-struct-content { 

244width: 100%; 

245} 

246.lib-struct-details-wrapper { 

247text-align: center !important; 

248} 

249.lib-struct-desc { 

250text-align: center !important; 

251} 

252.lib-struct-footer { 

253justify-content: center; 

254} 

255} 

256</style> 

257 

258<section class="lib-struct-section"> 

259<div class="lib-struct-card"> 

260#if ($img_portada && $img_portada.getData() != "") 

261    #set($imgPortadaVal = $img_portada.getData()) 

262#else 

263    #set($imgPortadaVal = "https://placehold.co/600x400/024966/FFFFFF?text=Sin+Imagen") 

264#end 

265 

266<div class="lib-struct-img-container" onclick="openLibModal('$imgPortadaVal')"> 

267    <img class="lib-struct-img" src="$imgPortadaVal" alt="$reserved-article-title.getData()" onerror="this.onerror=null;this.src='https://placehold.co/600x400/024966/FFFFFF?text=Imagen+No+Disponible';" /> 

268</div> 

269 

270<div class="lib-struct-content"> 

271    #set ($articleTitle = "") 

272    #if ($validator.isNotNull($reserved-article-title.getData())) 

273        #set ($articleTitle = $reserved-article-title.getData()) 

274    #end 

275 

276    #set ($articleId = "") 

277    #if ($validator.isNotNull($reserved-article-id.getData())) 

278        #set ($articleId = $reserved-article-id.getData()) 

279    #end 

280 

281    <h3 class="lib-struct-title"> 

282        <a href="javascript:;" class="enl_$articleId">$articleTitle</a> 

283    </h3> 

284     

285    <div class="lib-struct-details-wrapper" id="$articleId"> 

286        #if ($descripcion_lib && $descripcion_lib.getData() != "") 

287        <div class="lib-struct-desc"> 

288            #set($htmlRaw = $descripcion_lib.getData()) 

289            #set($htmlWrapped = $htmlRaw.replaceAll('<img([^>]+)src="([^"]+)"([^>]*)>', '<div class="img-umsa-wrapper" onclick="openLibModal(\'$2\')"><img$1src="$2"$3></div>')) 

290            $htmlWrapped 

291        </div> 

292        #end 

293         

294        #if ($autor_lib && $autor_lib.getData() != "") 

295        <div class="lib-struct-meta-group"> 

296            <div class="lib-struct-label">Autor(es)</div> 

297            <div class="lib-struct-value">$autor_lib.getData()</div> 

298        </div> 

299        #end 

300         

301        #if ($FechaDePublicacion && $FechaDePublicacion.getData() != "") 

302            #set ($FechaDePublicacion_Data = $getterUtil.getString($FechaDePublicacion.getData())) 

303            #if ($validator.isNotNull($FechaDePublicacion_Data)) 

304                #set ($FechaDePublicacion_DateObj = $dateUtil.parseDate("yyyy-MM-dd", $FechaDePublicacion_Data, $locale)) 

305                <div class="lib-struct-meta-group"> 

306                    <div class="lib-struct-label">Fecha de publicación:</div> 

307                    <div class="lib-struct-value">$dateUtil.getDate($FechaDePublicacion_DateObj, "yyyy", $locale)</div> 

308                </div> 

309            #end 

310        #end 

311         

312        <div class="lib-struct-footer"> 

313            #if ($enlace_lib && $enlace_lib.getData() != "") 

314            <a class="lib-struct-btn" href="$enlace_lib.getData()" target="_blank"> 

315                <i class="fa-solid fa-external-link-alt"></i> Ver Enlace 

316            </a> 

317            #end 

318 

319            #if ($documento_lib && $documento_lib.getData() != "") 

320            <a class="lib-struct-btn" href="$documento_lib.getData()" target="_blank"> 

321                <i class="fa-solid fa-download"></i> $languageUtil.format($locale, "download-x","") 

322            </a> 

323            #end 

324        </div> 

325    </div> 

326</div> 

327</div> 

328</section> 

329 

330<div id="libModalGlobal" class="lib-modal-umsa" onclick="closeLibModal()"> 

331    <img id="libModalImg" src="" alt="Imagen Ampliada"> 

332</div> 

333 

334<script> 

335function openLibModal(imgSrc) { 

336    var modal = document.getElementById('libModalGlobal'); 

337    var modalImg = document.getElementById('libModalImg'); 

338    modalImg.src = imgSrc; 

339    modal.style.display = 'flex'; 

340} 

341 

342function closeLibModal() { 

343    var modal = document.getElementById('libModalGlobal'); 

344    modal.style.display = 'none'; 

345} 

346 

347$(document).ready(function(){ 

348    $(".enl_$articleId").click(function () { 

349        $("#$articleId").toggle("slow"); 

350    }); 

351}); 

352</script>