Update certStyles.css

Author: NovaDev404

web/certStyles.css

@@ -1,176 +1 @@
-/* certStyles.css
-   Only the extra rules needed for certificate manager page + hamburger fixes.
-   Assumes variables & base layout exist in styles.css.
-*/
 
-/* ---------- Sidebar active item ---------- */
-.sidebar-item.active{
-  color: var(--text);
-  background: linear-gradient(90deg, rgba(78,229,255,0.04), rgba(139,92,246,0.03));
-  border-color: rgba(78,229,255,0.08);
-  box-shadow: 0 6px 18px rgba(78,229,255,0.03);
-}
-
-/* ---------- Prevent horizontal overflow ---------- */
-.content-area{
-  overflow-x: hidden;
-  position: relative;
-}
-
-.panel{
-  overflow-x: hidden;
-  overflow-y: auto;
-  min-height: 0;
-  box-sizing: border-box;
-}
-
-/* ---------- Recommended box ---------- */
-.recommended-box{
-  width:100%;
-  margin-bottom:12px;
-  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
-  border: 1px solid var(--card-border);
-  padding: 12px;
-  border-radius: 10px;
-  color: var(--muted);
-  box-sizing: border-box;
-}
-
-/* ---------- Certificate grid ---------- */
-.cert-list{
-  display:grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 14px;
-  margin-top:6px;
-  box-sizing: border-box;
-}
-
-/* ---------- Certificate cards ---------- */
-.cert-card{
-  background: rgba(255,255,255,0.013);
-  border: 1px solid var(--card-border);
-  padding: 12px;
-  border-radius: 12px;
-  transition: transform .16s ease, box-shadow .16s ease;
-  cursor: pointer;
-  display:flex;
-  flex-direction:column;
-  justify-content:space-between;
-  min-height:92px;
-  box-sizing: border-box;
-}
-
-.cert-card:hover{
-  transform: translateY(-6px);
-  box-shadow: 0 22px 48px rgba(2,6,23,0.5);
-}
-
-.cert-card:focus{
-  outline: 3px solid rgba(78,229,255,0.08);
-  outline-offset:3px;
-}
-
-/* ---------- Badges ---------- */
-.badge.signed{
-  background: linear-gradient(90deg, rgba(78,229,255,0.12), rgba(139,92,246,0.08));
-  color:#021018;
-}
-
-.badge.revoked{
-  background: linear-gradient(90deg, rgba(255,107,107,0.12), rgba(255,107,107,0.06));
-  color:var(--text);
-}
-
-/* ---------- Updates (expand UPWARDS) ---------- */
-.updates-box{
-  margin-top:12px;
-  padding:12px;
-  background: var(--glass);
-  border-radius:10px;
-  border:1px solid var(--card-border);
-  box-sizing: border-box;
-  overflow: visible;
-  position: relative;
-}
-
-.updates-header{
-  display:flex;
-  justify-content:space-between;
-  align-items:center;
-  gap:10px;
-}
-
-.updates-title{
-  margin:0;
-  font-size:0.96rem;
-  color: var(--muted);
-  font-weight:700;
-}
-
-.updates-toggle{
-  background:transparent;
-  border:1px solid rgba(255,255,255,0.04);
-  padding:6px 8px;
-  border-radius:8px;
-  cursor:pointer;
-  color: var(--muted);
-  transition: transform .18s ease, color .14s ease;
-  box-sizing: border-box;
-}
-
-.updates-toggle.rotated{
-  transform: rotate(180deg);
-  color: var(--accent);
-}
-
-/* floating updates panel */
-.updates-inner{
-  position:absolute;
-  left:0;
-  right:0;
-  bottom: calc(100% + 8px);
-  max-height:0;
-  overflow:auto;
-  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.01));
-  border:1px solid var(--card-border);
-  border-radius:10px;
-  box-shadow: 0 18px 50px rgba(2,6,23,0.6);
-  padding-left:8px;
-  padding-right:8px;
-  transition: max-height .22s ease, padding .18s ease;
-  z-index:1300;
-  box-sizing:border-box;
-}
-
-.update-item{
-  padding:8px 10px;
-  border-radius:8px;
-  background: rgba(255,255,255,0.008);
-  border:1px solid transparent;
-  color: var(--text);
-  font-size:0.95rem;
-  margin:8px;
-}
-
-.updates-box.expanded .updates-inner{
-  padding-top:8px;
-  padding-bottom:8px;
-}
-
-/* ---------- Modal ---------- */
-.modal-panel{
-  box-sizing: border-box;
-  max-height: 90vh;
-  overflow:auto;
-}
-
-/* ---------- Small screens ---------- */
-@media (max-width: 520px){
-  .updates-inner{
-    left:6px;
-    right:6px;
-    bottom: calc(100% + 6px);
-    max-width: calc(100vw - 12px);
-  }
-  .cert-list{ gap:10px; }
-}