MediaWiki:Common.css: Difference between revisions
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 24: | Line 24: | ||
} | } | ||
.mode- | |||
.mode-selector-container { | |||
margin: 1em; | |||
text-align: center; | |||
} | } | ||
.mode- | .mode-toggle-button { | ||
background-color: #2ecc71; | |||
color: white; | |||
border: none; | |||
border-radius: 4px; | |||
padding: 0.75em 1.5em; | |||
font-size: 1em; | |||
cursor: pointer; | cursor: pointer; | ||
color: | transition: background-color 0.2s; | ||
box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |||
width: auto; | |||
display: inline-flex; | |||
align-items: center; | |||
gap: 0.5em; | |||
} | } | ||
.mode- | .mode-toggle-button:hover { | ||
color: # | background-color: #27ae60; | ||
} | |||
.mode-toggle-button.active { | |||
background-color: #27ae60; | |||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); | |||
} | |||
.toggle-arrow { | |||
font-size: 0.8em; | |||
margin-left: 0.5em; | |||
} | } | ||
Line 42: | Line 67: | ||
display: none; | display: none; | ||
position: absolute; | position: absolute; | ||
left: | left: 50%; | ||
transform: translateX(-50%); | |||
background: white; | background: white; | ||
border: 1px solid # | border: 1px solid #ddd; | ||
border-radius: | border-radius: 4px; | ||
box-shadow: 0 | box-shadow: 0 4px 8px rgba(0,0,0,0.1); | ||
z-index: 1000; | z-index: 1000; | ||
min-width: | min-width: 250px; | ||
margin-top: 0.5em; | |||
} | } | ||
.mode-menu.visible { | .mode-menu.visible { | ||
display: block; | display: block; | ||
} | |||
.mode-menu-header { | |||
padding: 0.75em 1em; | |||
background: #f8f9fa; | |||
border-bottom: 1px solid #ddd; | |||
font-weight: bold; | |||
color: #202122; | |||
} | } | ||
.mode-option { | .mode-option { | ||
display: block; | display: block; | ||
padding: | padding: 1em; | ||
color: #202122; | color: #202122; | ||
text-decoration: none; | text-decoration: none; | ||
border-bottom: 1px solid #eee; | |||
} | |||
.mode-option:last-child { | |||
border-bottom: none; | |||
} | } | ||
.mode-option:hover { | .mode-option:hover { | ||
background-color: #f8f9fa; | background-color: #f8f9fa; | ||
} | } | ||
.mode-option.active { | .mode-option.active { | ||
background-color: # | background-color: #e8f5e9; | ||
} | |||
.mode-title { | |||
display: block; | |||
font-weight: bold; | font-weight: bold; | ||
margin-bottom: 0.25em; | |||
} | |||
.mode-description { | |||
display: block; | |||
font-size: 0.9em; | |||
color: #666; | |||
} | } | ||
/* Content marking styles */ | /* Content marking styles */ | ||
.manga-content { | .manga-content { | ||
border-left: | border-left: 3px solid #2ecc71; | ||
padding | padding: 0.5em 1em; | ||
margin: 0 | margin: 1em 0; | ||
background: #f8fff9; | |||
} | } | ||
.anime-content { | .anime-content { | ||
padding | padding: 0.5em 1em; | ||
margin: | margin: 1em 0; | ||
} | } |
Revision as of 18:02, 6 February 2025
/* CSS placed here will be applied to all skins */
.infobox {
background: #eee;
border: 1px solid #aaa;
float: right;
margin: 0 0 1em 1em;
padding: 1em;
width: 300px;
}
.infobox-title {
font-size: 2em;
text-align: center;
}
.infobox-image {
text-align: center;
}
.infobox-table th {
text-align: left;
vertical-align: top;
width: 120px;
}
.infobox-table td {
vertical-align: top;
}
.mode-selector-container {
margin: 1em;
text-align: center;
}
.mode-toggle-button {
background-color: #2ecc71;
color: white;
border: none;
border-radius: 4px;
padding: 0.75em 1.5em;
font-size: 1em;
cursor: pointer;
transition: background-color 0.2s;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: auto;
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.mode-toggle-button:hover {
background-color: #27ae60;
}
.mode-toggle-button.active {
background-color: #27ae60;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-arrow {
font-size: 0.8em;
margin-left: 0.5em;
}
.mode-menu {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
background: white;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
z-index: 1000;
min-width: 250px;
margin-top: 0.5em;
}
.mode-menu.visible {
display: block;
}
.mode-menu-header {
padding: 0.75em 1em;
background: #f8f9fa;
border-bottom: 1px solid #ddd;
font-weight: bold;
color: #202122;
}
.mode-option {
display: block;
padding: 1em;
color: #202122;
text-decoration: none;
border-bottom: 1px solid #eee;
}
.mode-option:last-child {
border-bottom: none;
}
.mode-option:hover {
background-color: #f8f9fa;
}
.mode-option.active {
background-color: #e8f5e9;
}
.mode-title {
display: block;
font-weight: bold;
margin-bottom: 0.25em;
}
.mode-description {
display: block;
font-size: 0.9em;
color: #666;
}
/* Content marking styles */
.manga-content {
border-left: 3px solid #2ecc71;
padding: 0.5em 1em;
margin: 1em 0;
background: #f8fff9;
}
.anime-content {
padding: 0.5em 1em;
margin: 1em 0;
}