https://dunedb.com/index.php?action=history&feed=atom&title=MediaWiki%3AGadget-ResourcePage.css 2026-05-24T04:20:05Z Revision history for this page on the wiki MediaWiki 1.43.1 https://dunedb.com/index.php?title=MediaWiki:Gadget-ResourcePage.css&diff=922&oldid=prev 2025-06-03T16:50:27Z

<p>Created page with &quot;<span class="autocomment">* * ResourcePage Gadget CSS * Styles for recipe popups and additional functionality: </span> <span class="autocomment">Recipe Popup Overlay: </span> .recipe-popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.8); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .recipe-popup-overlay.active {...&quot;</p> <p><b>New page</b></p><div>/**<br /> * ResourcePage Gadget CSS<br /> * Styles for recipe popups and additional functionality<br /> */<br /> <br /> /* Recipe Popup Overlay */<br /> .recipe-popup-overlay {<br /> position: fixed;<br /> top: 0;<br /> left: 0;<br /> right: 0;<br /> bottom: 0;<br /> background: rgba(0,0,0,.8);<br /> z-index: 10000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> opacity: 0;<br /> visibility: hidden;<br /> transition: opacity .3s ease, visibility .3s ease;<br /> }<br /> <br /> .recipe-popup-overlay.active {<br /> opacity: 1;<br /> visibility: visible;<br /> }<br /> <br /> /* Recipe Popup Container */<br /> .recipe-popup {<br /> background: linear-gradient(135deg, rgba(0,0,2,.95) 0%, rgba(12,10,20,.95) 100%);<br /> border: 2px solid rgba(252,231,200,.3);<br /> width: 90%;<br /> max-width: 1200px;<br /> max-height: 80vh;<br /> display: flex;<br /> flex-direction: column;<br /> box-shadow: 0 0 40px rgba(0,0,0,.8), inset 0 0 30px rgba(252,231,200,.05);<br /> clip-path: polygon(<br /> 0 20px,<br /> 20px 0,<br /> calc(100% - 20px) 0,<br /> 100% 20px,<br /> 100% calc(100% - 20px),<br /> calc(100% - 20px) 100%,<br /> 20px 100%,<br /> 0 calc(100% - 20px)<br /> );<br /> }<br /> <br /> /* Popup Header */<br /> .popup-header {<br /> background: rgba(0,0,2,.9);<br /> border-bottom: 2px solid rgba(252,231,200,.4);<br /> padding: 16px 24px;<br /> display: flex;<br /> justify-content: space-between;<br /> align-items: center;<br /> }<br /> <br /> .popup-title {<br /> color: #fce7c8;<br /> font-size: 24px;<br /> font-weight: 700;<br /> text-transform: uppercase;<br /> letter-spacing: 1px;<br /> margin: 0;<br /> }<br /> <br /> .popup-close {<br /> background: none;<br /> border: none;<br /> color: #fce7c8;<br /> font-size: 32px;<br /> cursor: pointer;<br /> transition: transform 0.3s ease, color 0.3s ease;<br /> padding: 0;<br /> width: 40px;<br /> height: 40px;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> <br /> .popup-close:hover {<br /> color: #fff;<br /> transform: rotate(90deg);<br /> }<br /> <br /> /* Popup Content */<br /> .popup-content {<br /> padding: 24px;<br /> overflow-y: auto;<br /> flex: 1;<br /> }<br /> <br /> /* Popup Search */<br /> .popup-search-container {<br /> margin-bottom: 16px;<br /> }<br /> <br /> .popup-search-input {<br /> width: 100%;<br /> padding: 12px 16px;<br /> background: rgba(0,0,2,.8);<br /> border: 2px solid rgba(252,231,200,.3);<br /> color: #fce7c8;<br /> font-size: 16px;<br /> font-family: &#039;Rajdhani&#039;, sans-serif;<br /> transition: border-color 0.3s ease, box-shadow 0.3s ease;<br /> outline: none;<br /> }<br /> <br /> .popup-search-input:focus {<br /> border-color: #fce7c8;<br /> box-shadow: 0 0 15px rgba(252,231,200,.4);<br /> }<br /> <br /> /* Popup Table */<br /> .popup-table-wrapper {<br /> overflow-x: auto;<br /> }<br /> <br /> .recipe-popup-table {<br /> width: 100%;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> }<br /> <br /> .recipe-popup-table thead th {<br /> background: rgba(0,0,2,.9) !important;<br /> color: #fce7c8 !important;<br /> font-weight: 700;<br /> text-transform: uppercase;<br /> letter-spacing: 1px;<br /> padding: 14px 12px !important;<br /> font-size: 14px !important;<br /> position: sticky;<br /> top: 0;<br /> z-index: 10;<br /> border-bottom: 2px solid rgba(252,231,200,.4);<br /> cursor: pointer;<br /> user-select: none;<br /> }<br /> <br /> .recipe-popup-table thead th:hover {<br /> background: rgba(252,231,200,.1) !important;<br /> }<br /> <br /> .recipe-popup-table tbody tr {<br /> transition: background 0.2s ease;<br /> }<br /> <br /> .recipe-popup-table tbody tr:hover {<br /> background: rgba(252,231,200,.05);<br /> }<br /> <br /> .recipe-popup-table tbody td {<br /> padding: 12px !important;<br /> font-size: 14px !important;<br /> color: #E0E0E0;<br /> background: rgba(12,10,20,.6);<br /> border-bottom: 1px solid rgba(252,231,200,.2);<br /> }<br /> <br /> /* Mobile Adjustments */<br /> @media (max-width: 768px) {<br /> .recipe-popup {<br /> width: 95%;<br /> max-height: 90vh;<br /> }<br /> <br /> .popup-title {<br /> font-size: 18px !important;<br /> }<br /> <br /> .recipe-popup-table th,<br /> .recipe-popup-table td {<br /> padding: 8px 6px !important;<br /> font-size: 12px !important;<br /> }<br /> <br /> /* Hide less important columns on mobile */<br /> .recipe-popup-table th:nth-child(4),<br /> .recipe-popup-table td:nth-child(4),<br /> .recipe-popup-table th:nth-child(5),<br /> .recipe-popup-table td:nth-child(5),<br /> .recipe-popup-table th:nth-child(6),<br /> .recipe-popup-table td:nth-child(6) {<br /> display: none;<br /> }<br /> }</div>

Operator