forked from PrivateCoffee/wikimore
fix(css): improve hover and layout consistency
Unified hover text-decoration styles to underline on hover for all elements and reduced redundant style rules across different classes. Adjusted layout styling for better alignment and clarity, addressing margin and padding inconsistencies in various components including sidebar, infobox, and table elements. Improved responsive design by clearing float issues for infoboxes and sidebars on smaller screens.
This commit is contained in:
parent
f92d3ce79b
commit
10f354a240
GPG key ID:
ECBCC9082395383F
1 changed files with 51 additions and 139 deletions
|
|
@ -19,6 +19,10 @@ a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Header styling */
|
||||
#header {
|
||||
background-color: #ffffff;
|
||||
|
|
@ -64,12 +68,9 @@ a {
|
|||
padding: 5px;
|
||||
}
|
||||
|
||||
#search-form select {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#search-form select,
|
||||
#search-form button {
|
||||
padding: 5px 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Content styling */
|
||||
|
|
@ -87,15 +88,12 @@ h1 {
|
|||
.sidebar {
|
||||
float: right;
|
||||
width: 250px;
|
||||
margin-left: 20px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #a2a9b1;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
.toc {
|
||||
|
|
@ -107,15 +105,6 @@ h1 {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.toc a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.toc a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#footer {
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #a2a9b1;
|
||||
|
|
@ -149,15 +138,6 @@ h1 {
|
|||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.table a {
|
||||
color: #1e90ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.table a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
|
@ -196,62 +176,41 @@ h1 {
|
|||
font-size: small;
|
||||
}
|
||||
|
||||
.navbox-title {
|
||||
background-color: #bbddff;
|
||||
color: #000;
|
||||
font-size: 114%;
|
||||
margin: 0 4em;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.navbox-group {
|
||||
background-color: #bbddff;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.navbox-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbox-list a {
|
||||
color: #1e90ff;
|
||||
}
|
||||
|
||||
.navbox-list a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navbox-image img {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbox-title,
|
||||
.navbox-group,
|
||||
.navbox-abovebelow {
|
||||
background-color: #bbddff;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbox-title {
|
||||
font-size: 114%;
|
||||
margin: 0 4em;
|
||||
}
|
||||
|
||||
.navbox-group {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.navbox-inner {
|
||||
border-spacing: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.navbox-list-with-group {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.hlist ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
@ -263,14 +222,6 @@ h1 {
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.hlist ul li a {
|
||||
color: #1e90ff;
|
||||
}
|
||||
|
||||
.hlist ul li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Authority control styling */
|
||||
.authority-control {
|
||||
padding: 3px;
|
||||
|
|
@ -279,14 +230,6 @@ h1 {
|
|||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.uid a {
|
||||
color: #1e90ff;
|
||||
}
|
||||
|
||||
.uid a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Sidebar styling */
|
||||
.infobox {
|
||||
float: right;
|
||||
|
|
@ -298,13 +241,14 @@ h1 {
|
|||
font-size: small;
|
||||
border-collapse: collapse;
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: auto;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
.infobox-above {
|
||||
.infobox-above,
|
||||
.infobox-header {
|
||||
background-color: #1e90ff;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
|
@ -312,10 +256,6 @@ h1 {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.infobox-above a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.infobox-subheader {
|
||||
background-color: #bbddff;
|
||||
text-align: center;
|
||||
|
|
@ -323,24 +263,17 @@ h1 {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.infobox-full-data {
|
||||
text-align: center;
|
||||
.infobox-full-data,
|
||||
.infobox-label,
|
||||
.infobox-data {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.infobox-label {
|
||||
background-color: #f2f2f2;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.infobox-data {
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.ib-settlement-cols {
|
||||
|
|
@ -349,49 +282,29 @@ h1 {
|
|||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.ib-settlement-cols-cell {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ib-settlement-caption-link {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.ib-settlement-caption {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.ib-settlement-nickname {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.infobox-header {
|
||||
background-color: #1e90ff;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Figure styling */
|
||||
figure,
|
||||
.tmulti {
|
||||
.tmulti,
|
||||
.thumb {
|
||||
margin: 1em 0;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ddd;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
overflow-x: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
figure img,
|
||||
.tmulti .mw-file-element {
|
||||
.tmulti .mw-file-element,
|
||||
.thumb img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #ddd;
|
||||
|
|
@ -405,12 +318,15 @@ figcaption,
|
|||
.thumbcaption {
|
||||
margin-top: 10px;
|
||||
font-size: small;
|
||||
text-align: left;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.mw-halign-left {
|
||||
.mw-halign-left,
|
||||
.tleft {
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
|
@ -422,13 +338,15 @@ figcaption,
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.mw-halign-right {
|
||||
.mw-halign-right,
|
||||
.tright {
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.mw-default-size {
|
||||
width: fit-content;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Reference styling */
|
||||
|
|
@ -466,10 +384,12 @@ span {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.sidebar,
|
||||
.infobox {
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
float: none;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.table {
|
||||
|
|
@ -477,12 +397,6 @@ span {
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.infobox {
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
figure,
|
||||
.tmulti {
|
||||
max-width: 100%;
|
||||
|
|
@ -515,9 +429,12 @@ span {
|
|||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.sidebar,
|
||||
.infobox {
|
||||
max-width: 100%;
|
||||
margin: 5px 0;
|
||||
float: none;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.table th,
|
||||
|
|
@ -525,11 +442,6 @@ span {
|
|||
padding: 5px;
|
||||
}
|
||||
|
||||
.infobox {
|
||||
max-width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
figure,
|
||||
.tmulti {
|
||||
max-width: 100%;
|
||||
|
|
|
|||
Loading…
Reference in a new issue