MediaWiki:Common.css: Difference between revisions

MediaWiki:Common.css (view source)

Revision as of 18:04, 6 February 2025

910 bytes removed , 6 February

no edit summary

Zhiktang

Bureaucrats, Interface administrators, Administrators

290

edits

@@ Line 28: / Line 28: @@
+.content-toggle {
-.mode-selector-container {
+    position: fixed;
-     margin: 1em;
+    top: 70px;
-     text-align: center;
+    right: 20px;
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 8px;
+     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+     z-index: 100;
 }
-.mode-toggle-button {
+.toggle-switch {
-     background-color: #2ecc71;
+     position: relative;
-     color: white;
+     display: inline-block;
-    border: none;
+     width: 60px;
-    border-radius: 4px;
+     height: 34px;
-    padding: 0.75em 1.5em;
+     margin-left: 10px;
-    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 {
+.toggle-switch input {
-     background-color: #27ae60;
+    opacity: 0;
+    width: 0;
+     height: 0;
 }
-.mode-toggle-button.active {
+.slider {
-     background-color: #27ae60;
+     position: absolute;
-     box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+    cursor: pointer;
-}
+     top: 0;
+    left: 0;
-.toggle-arrow {
+    right: 0;
-     font-size: 0.8em;
+    bottom: 0;
-     margin-left: 0.5em;
+    background-color: #2196F3;
+     transition: .4s;
+     border-radius: 34px;
 }
-.mode-menu {
+.slider:before {
-    display: none;
      position: absolute;
-     left: 50%;
+     content: "";
-     transform: translateX(-50%);
+     height: 26px;
-     background: white;
+     width: 26px;
-     border: 1px solid #ddd;
+     left: 4px;
-    border-radius: 4px;
+     bottom: 4px;
-     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+     background-color: white;
-    z-index: 1000;
+     transition: .4s;
-    min-width: 250px;
+     border-radius: 50%;
-    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 */
+input:checked + .slider {
-.manga-content {
+     background-color: #ff4081;
-     border-left: 3px solid #2ecc71;
-    padding: 0.5em 1em;
-    margin: 1em 0;
-    background: #f8fff9;
 }
-.anime-content {
+input:checked + .slider:before {
-     padding: 0.5em 1em;
+     transform: translateX(26px);
-    margin: 1em 0;
 }