User:Fen/Portals/Software/styles.css: Difference between revisions
I think this looks better |
No edit summary |
||
| Line 1: | Line 1: | ||
.software-portal-wrapper { | .software-portal-wrapper { | ||
font-family: "JetBrains Mono", monospace; | font-family: "JetBrains Mono", monospace; | ||
background: # | background: #f8f9fa; | ||
color: # | color: #1b1b1b; | ||
padding: 2em; | padding: 2em; | ||
max-width: 1200px; | max-width: 1200px; | ||
| Line 8: | Line 8: | ||
} | } | ||
/* Header | /* Header */ | ||
.software-header { | .software-header { | ||
background: linear-gradient(to right, # | background: linear-gradient(to right, #d0f2f2, #e2f7ff); | ||
color: # | color: #003333; | ||
padding: 1.8em; | padding: 1.8em; | ||
border-left: 8px solid # | border-left: 8px solid #00aaaa; | ||
border-radius: 8px; | border-radius: 8px; | ||
margin-bottom: 2em; | margin-bottom: 2em; | ||
box-shadow: 0 0 12px rgba(0, | box-shadow: 0 0 12px rgba(0, 150, 150, 0.1); | ||
} | } | ||
.software-title { | .software-title { | ||
| Line 26: | Line 26: | ||
font-size: 1em; | font-size: 1em; | ||
font-style: italic; | font-style: italic; | ||
color: # | color: #005555; | ||
margin-top: 0.4em; | margin-top: 0.4em; | ||
} | } | ||
| Line 39: | Line 39: | ||
/* Card */ | /* Card */ | ||
.software-card { | .software-card { | ||
background: # | background: #ffffff; | ||
border: 1px solid # | border: 1px solid #ddd; | ||
border-left: 5px solid # | border-left: 5px solid #7c4dff; | ||
border-radius: 6px; | border-radius: 6px; | ||
padding: 1.2em; | padding: 1.2em; | ||
box-shadow: 0 0 8px rgba( | box-shadow: 0 0 8px rgba(124, 77, 255, 0.05); | ||
transition: transform 0.2s ease, box-shadow 0.2s ease; | transition: transform 0.2s ease, box-shadow 0.2s ease; | ||
} | } | ||
.software-card:hover { | .software-card:hover { | ||
transform: translateY(-3px); | transform: translateY(-3px); | ||
box-shadow: 0 0 12px rgba( | box-shadow: 0 0 12px rgba(124, 77, 255, 0.15); | ||
} | } | ||
.software-card.wide { | .software-card.wide { | ||
| Line 59: | Line 59: | ||
font-size: 1.3em; | font-size: 1.3em; | ||
font-weight: bold; | font-weight: bold; | ||
color: # | color: #5f2dab; | ||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #bbb; | ||
padding-bottom: 0.2em; | padding-bottom: 0.2em; | ||
} | } | ||
| Line 68: | Line 68: | ||
.software-card-body { | .software-card-body { | ||
font-size: 0.97em; | font-size: 0.97em; | ||
color: # | color: #2b2b2b; | ||
line-height: 1.6; | line-height: 1.6; | ||
} | } | ||
| Line 86: | Line 86: | ||
.software-card-body a[href*="Category:"] { | .software-card-body a[href*="Category:"] { | ||
display: inline-block; | display: inline-block; | ||
background: # | background: #e8f4f4; | ||
border: 1px solid # | border: 1px solid #c0eaea; | ||
padding: 0.4em 0.8em; | padding: 0.4em 0.8em; | ||
font-size: 0.9em; | font-size: 0.9em; | ||
font-weight: 600; | font-weight: 600; | ||
color: # | color: #008b8b; | ||
border-radius: 4px; | border-radius: 4px; | ||
margin: 0.3em; | margin: 0.3em; | ||
| Line 98: | Line 98: | ||
} | } | ||
.software-card-body a[href*="Category:"]:hover { | .software-card-body a[href*="Category:"]:hover { | ||
background: # | background: #d2f0f0; | ||
border-color: #00cccc; | border-color: #00cccc; | ||
} | } | ||
| Line 105: | Line 105: | ||
a:link, | a:link, | ||
a:visited { | a:visited { | ||
color: # | color: #006699; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
a:hover { | a:hover { | ||
color: # | color: #0099cc; | ||
text-decoration: underline; | text-decoration: underline; | ||
} | |||
@media screen { | |||
html.skin-theme-clientpref-night .software-portal-wrapper, | |||
html.skin-theme-clientpref-os .software-portal-wrapper { | |||
background: #0d0d0d; | |||
color: #e0e0e0; | |||
} | |||
html.skin-theme-clientpref-night .software-header, | |||
html.skin-theme-clientpref-os .software-header { | |||
background: linear-gradient(to right, #121212, #1e1e1e); | |||
color: #ffffff; | |||
border-left-color: #00ffff; | |||
box-shadow: 0 0 12px rgba(0, 255, 255, 0.2); | |||
} | |||
html.skin-theme-clientpref-night .software-title, | |||
html.skin-theme-clientpref-os .software-title { | |||
color: #ccffff; | |||
} | |||
html.skin-theme-clientpref-night .software-subtitle, | |||
html.skin-theme-clientpref-os .software-subtitle { | |||
color: #a0ffff; | |||
} | |||
html.skin-theme-clientpref-night .software-card, | |||
html.skin-theme-clientpref-os .software-card { | |||
background: #1a1a1a; | |||
border: 1px solid #2a2a2a; | |||
border-left: 5px solid #b380ff; | |||
box-shadow: 0 0 8px rgba(179, 128, 255, 0.05); | |||
} | |||
html.skin-theme-clientpref-night .software-card:hover, | |||
html.skin-theme-clientpref-os .software-card:hover { | |||
box-shadow: 0 0 12px rgba(179, 128, 255, 0.15); | |||
} | |||
html.skin-theme-clientpref-night .software-card-title, | |||
html.skin-theme-clientpref-os .software-card-title { | |||
color: #b380ff; | |||
border-bottom: 1px solid #333; | |||
} | |||
html.skin-theme-clientpref-night .software-card-body, | |||
html.skin-theme-clientpref-os .software-card-body { | |||
color: #d0d0d0; | |||
} | |||
html.skin-theme-clientpref-night .software-card-body a[href*="Category:"], | |||
html.skin-theme-clientpref-os .software-card-body a[href*="Category:"] { | |||
background: #262626; | |||
border: 1px solid #3a3a3a; | |||
color: #00ffff; | |||
} | |||
html.skin-theme-clientpref-night .software-card-body a[href*="Category:"]:hover, | |||
html.skin-theme-clientpref-os .software-card-body a[href*="Category:"]:hover { | |||
background: #1e1e1e; | |||
border-color: #00cccc; | |||
} | |||
html.skin-theme-clientpref-night a:link, | |||
html.skin-theme-clientpref-night a:visited, | |||
html.skin-theme-clientpref-os a:link, | |||
html.skin-theme-clientpref-os a:visited { | |||
color: #33ccff; | |||
} | |||
html.skin-theme-clientpref-night a:hover, | |||
html.skin-theme-clientpref-os a:hover { | |||
color: #00ffff; | |||
} | |||
} | } | ||