blitzwing/wikimore
1
0
Fork 0
forked from PrivateCoffee/wikimore
Code Pull requests Activity

fix(css): improve hover and layout consistency

Browse source 
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:
Kumi 2024-08-18 09:15:00 +02:00
parent f92d3ce79b
commit 10f354a240
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 51 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

190
src/wikimore/static/css/style.css
View file

@ -19,6 +19,10 @@ a {
text-decoration: none; text-decoration: none;
} }
a:hover {
text-decoration: underline;
}
/* Header styling */ /* Header styling */
#header { #header {
background-color: #ffffff; background-color: #ffffff;
@ -64,12 +68,9 @@ a {
padding: 5px; padding: 5px;
} }
#search-form select { #search-form select,
padding: 5px;
}
#search-form button { #search-form button {
padding: 5px 10px; padding: 5px;
} }
/* Content styling */ /* Content styling */
@ -87,15 +88,12 @@ h1 {
.sidebar { .sidebar {
float: right; float: right;
width: 250px; width: 250px;
margin-left: 20px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #a2a9b1; border: 1px solid #a2a9b1;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
display: flex;
flex-direction: column;
max-width: 100%;
margin: 10px 0; margin: 10px 0;
clear: right;
} }
.toc { .toc {
@ -107,15 +105,6 @@ h1 {
margin-bottom: 5px; margin-bottom: 5px;
} }
.toc a {
text-decoration: none;
color: #333;
}
.toc a:hover {
text-decoration: underline;
}
#footer { #footer {
background-color: #ffffff; background-color: #ffffff;
border-top: 1px solid #a2a9b1; border-top: 1px solid #a2a9b1;
@ -149,15 +138,6 @@ h1 {
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.table a {
color: #1e90ff;
text-decoration: none;
}
.table a:hover {
text-decoration: underline;
}
.table tr:nth-child(even) { .table tr:nth-child(even) {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
@ -196,62 +176,41 @@ h1 {
font-size: small; font-size: small;
} }
.navbox-title { .navbox-title,
background-color: #bbddff; .navbox-group,
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-abovebelow { .navbox-abovebelow {
background-color: #bbddff; background-color: #bbddff;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
} }
.navbox-title {
font-size: 114%;
margin: 0 4em;
}
.navbox-group {
text-align: left;
border-bottom: 1px solid #ddd;
}
.navbox-inner { .navbox-inner {
border-spacing: 0; border-spacing: 0;
background: transparent; background: transparent;
color: inherit; color: inherit;
} }
.navbar {
text-align: center;
padding: 5px;
}
.navbox-list-with-group { .navbox-list-with-group {
padding: 0; padding: 0;
margin: 0; margin: 0;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.navbar {
text-align: center;
padding: 5px;
}
.hlist ul { .hlist ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -263,14 +222,6 @@ h1 {
margin-right: 10px; margin-right: 10px;
} }
.hlist ul li a {
color: #1e90ff;
}
.hlist ul li a:hover {
text-decoration: underline;
}
/* Authority control styling */ /* Authority control styling */
.authority-control { .authority-control {
padding: 3px; padding: 3px;
@ -279,14 +230,6 @@ h1 {
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.uid a {
color: #1e90ff;
}
.uid a:hover {
text-decoration: underline;
}
/* Sidebar styling */ /* Sidebar styling */
.infobox { .infobox {
float: right; float: right;
@ -298,13 +241,14 @@ h1 {
font-size: small; font-size: small;
border-collapse: collapse; border-collapse: collapse;
max-width: 100%; max-width: 100%;
margin: 10px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: auto; overflow-x: auto;
clear: right;
} }
.infobox-above { .infobox-above,
.infobox-header {
background-color: #1e90ff; background-color: #1e90ff;
color: white; color: white;
font-weight: bold; font-weight: bold;
@ -312,10 +256,6 @@ h1 {
padding: 10px; padding: 10px;
} }
.infobox-above a {
color: white;
}
.infobox-subheader { .infobox-subheader {
background-color: #bbddff; background-color: #bbddff;
text-align: center; text-align: center;
@ -323,24 +263,17 @@ h1 {
font-weight: bold; font-weight: bold;
} }
.infobox-full-data { .infobox-full-data,
text-align: center; .infobox-label,
.infobox-data {
padding: 5px; padding: 5px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.infobox-label { .infobox-label {
background-color: #f2f2f2; background-color: #f2f2f2;
padding: 5px;
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
border-bottom: 1px solid #ddd;
}
.infobox-data {
padding: 5px;
text-align: left;
border-bottom: 1px solid #ddd;
} }
.ib-settlement-cols { .ib-settlement-cols {
@ -349,49 +282,29 @@ h1 {
padding: 10px 0; padding: 10px 0;
} }
.ib-settlement-cols-cell {
text-align: center;
}
.ib-settlement-caption-link {
margin-top: 5px;
}
.ib-settlement-caption { .ib-settlement-caption {
text-align: center; text-align: center;
font-style: italic; font-style: italic;
margin-top: 5px; 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 styling */
figure, figure,
.tmulti { .tmulti,
.thumb {
margin: 1em 0; margin: 1em 0;
padding: 10px; padding: 10px;
background-color: #f9f9f9; background-color: #f9f9f9;
border: 1px solid #ddd; border: 1px solid #ddd;
display: inline-block;
max-width: 100%; max-width: 100%;
display: block; display: block;
margin: 10px 0;
overflow-x: auto; overflow-x: auto;
width: fit-content;
} }
figure img, figure img,
.tmulti .mw-file-element { .tmulti .mw-file-element,
.thumb img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -405,12 +318,15 @@ figcaption,
.thumbcaption { .thumbcaption {
margin-top: 10px; margin-top: 10px;
font-size: small; font-size: small;
text-align: left;
color: #555; color: #555;
text-align: center; text-align: center;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
} }
.mw-halign-left { .mw-halign-left,
.tleft {
float: left; float: left;
margin-right: 1em; margin-right: 1em;
} }
@ -422,13 +338,15 @@ figcaption,
text-align: center; text-align: center;
} }
.mw-halign-right { .mw-halign-right,
.tright {
float: right; float: right;
margin-left: 1em; margin-left: 1em;
} }
.mw-default-size { .mw-default-size {
width: fit-content; width: fit-content;
float: left;
} }
/* Reference styling */ /* Reference styling */
@ -466,10 +384,12 @@ span {
padding: 10px; padding: 10px;
} }
.sidebar { .sidebar,
.infobox {
max-width: 100%; max-width: 100%;
margin: 10px 0; margin: 10px 0;
float: none; float: none;
clear: none;
} }
.table { .table {
@ -477,12 +397,6 @@ span {
overflow-x: auto; overflow-x: auto;
} }
.infobox {
max-width: 100%;
margin: 10px 0;
float: none;
}
figure, figure,
.tmulti { .tmulti {
max-width: 100%; max-width: 100%;
@ -515,9 +429,12 @@ span {
font-size: 1.5em; font-size: 1.5em;
} }
.sidebar { .sidebar,
.infobox {
max-width: 100%; max-width: 100%;
margin: 5px 0; margin: 5px 0;
float: none;
clear: none;
} }
.table th, .table th,
@ -525,14 +442,9 @@ span {
padding: 5px; padding: 5px;
} }
.infobox {
max-width: 100%;
margin: 5px 0;
}
figure, figure,
.tmulti { .tmulti {
max-width: 100%; max-width: 100%;
margin: 5px 0; margin: 5px 0;
} }
} }