打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Gadget-AnniversaryTheme.css:修订间差异

MediaWiki界面页面
琪露若
琪露若留言 | 贡献 (创建页面,内容为“========== OTTOWiki 1st Anniversary Theme ==========:​ :root{ 主色:喜庆红 / 香槟金 / 柔和粉底:​ --color-anni-red: #d81b2a; --color-anni-red-deep: #9f0f1b; --color-anni-gold: #f3c46b; --color-anni-gold-deep: #d8a843; --color-anni-pink-bg: #fff4f6; 统一控制 SVG 图标填充色(把你原本 #ee6666 替掉):​ --color-anni-icon: #d81b2a; 渐变用:红 → 金 → surface:​ --anni-grad-1: #d81b2a; --anni…”)
 
第1行: 第1行:
/* ========== OTTOWiki 1st Anniversary Theme ========== */
/* ========== OTTOWiki 1st Anniversary Theme (Citizen progressive override) ========== */
:root{
:root{
   /* 主色:喜庆红 / 香槟金 / 柔和粉底 */
 
   --color-progressive-oklch__l:58%;
  --color-progressive-oklch__c:22%;
  --color-progressive-oklch__h:25;
 
  --color-progressive-hsl__h:355;
  --color-progressive-hsl__s:78%;
  --color-progressive-hsl__l:47%;
 
   --color-anni-red: #d81b2a;
   --color-anni-red: #d81b2a;
   --color-anni-red-deep: #9f0f1b;
   --color-anni-red-deep: #9f0f1b;
第8行: 第16行:
   --color-anni-pink-bg: #fff4f6;
   --color-anni-pink-bg: #fff4f6;


  /* 统一控制 SVG 图标填充色(把你原本 #ee6666 替掉) */
   --color-anni-icon: var(--color-anni-red);
   --color-anni-icon: #d81b2a;


  /* 渐变用:红 → 金 → surface */
   --anni-grad-1: var(--color-anni-red);
   --anni-grad-1: #d81b2a;
   --anni-grad-2: var(--color-anni-gold);
   --anni-grad-2: #f3c46b;
   --anni-grad-3: var(--color-surface-2);
   --anni-grad-3: var(--color-surface-2);


  /* 边框 / 文字辅助色 */
   --anni-border: #e9b7bd;
   --anni-border: #e9b7bd;
   --anni-soft-text: #7a1b23;
   --anni-soft-text: #7a1b23;
}
}


/* 顶部横幅:更有“庆典”感的渐变 + 轻微高光 */
.main-banner{
.main-banner{
   background:
   background:
第28行: 第32行:
}
}


/* 搜索框边框:用柔和红粉 */
.citizen-search-trigger{
.citizen-search-trigger{
   border-color: var(--anni-border) !important;
   border-color: var(--anni-border) !important;
}
}


/* 侧栏/提示块:周年红的左边框 */
.ottowiki-toppop{
.ottowiki-toppop{
   border-left: 6px solid var(--color-anni-red) !important;
   border-left: 6px solid var(--color-anni-red) !important;
}
}


/* ========== OOUI 图标:把 fill 改成主题色 ========== */
.oo-ui-image-progressive.oo-ui-icon-search,
.oo-ui-image-progressive.oo-ui-icon-search,
.mw-ui-icon-search-progressive:before{
.mw-ui-icon-search-progressive:before{
第64行: 第65行:
}
}


/* ========== IPE 工具箱:红金阶梯按钮 ========== */
#ipe-edit-toolbox #toolbox-toggle{ background: var(--color-anni-red-deep); }
#ipe-edit-toolbox #toolbox-toggle{ background: var(--color-anni-red-deep); }
#ipe-edit-toolbox .ipe-toolbox-btn#edit-btn{          background: var(--color-anni-red); }
#ipe-edit-toolbox .ipe-toolbox-btn#edit-btn{          background: var(--color-anni-red); }
#ipe-edit-toolbox .ipe-toolbox-btn#redirectfrom-btn{  background: #c01623; }
#ipe-edit-toolbox .ipe-toolbox-btn#redirectfrom-btn{  background: #c01623; }
第73行: 第72行:
#ipe-edit-toolbox .ipe-toolbox-btn#renamepage-btn{    background: #e43a44; }
#ipe-edit-toolbox .ipe-toolbox-btn#renamepage-btn{    background: #e43a44; }
#ipe-edit-toolbox .ipe-toolbox-btn#deletepage-btn{    background: #b91420; }
#ipe-edit-toolbox .ipe-toolbox-btn#deletepage-btn{    background: #b91420; }


img.mw-logo-icon{
img.mw-logo-icon{
   filter: hue-rotate(335deg) saturate(170%) brightness(95%);
   filter: hue-rotate(335deg) saturate(170%) brightness(95%) !important;
}
}


 
div#mainpagenav div[style*="background-color:#4CAF50"],
div#mainpagenav div[style*="background-color:#4CAF50;"],
div#mainpagenav div[style*="background-color: #4CAF50"],
div#mainpagenav span[style*="background-color:#4CAF50;"]{
div#mainpagenav span[style*="background-color:#4CAF50"],
div#mainpagenav span[style*="background-color: #4CAF50"]{
   background: linear-gradient(90deg, var(--color-anni-red) 0%, var(--color-anni-gold) 100%) !important;
   background: linear-gradient(90deg, var(--color-anni-red) 0%, var(--color-anni-gold) 100%) !important;
}
}
 
div#mainpagenav div[style*="background-color:#4CAF50"] > a.mw-redirect,
div#mainpagenav div[style*="background-color:#4CAF50;"] > a.mw-redirect,
div#mainpagenav div[style*="background-color: #4CAF50"] > a.mw-redirect,
div#mainpagenav span[style*="background-color:#4CAF50;"] > a.mw-redirect{
div#mainpagenav span[style*="background-color:#4CAF50"] > a.mw-redirect,
div#mainpagenav span[style*="background-color: #4CAF50"] > a.mw-redirect{
   color: #fff6e6 !important;
   color: #fff6e6 !important;
}
}
div#mainpagenav div[style*="border-bottom:2px solid"]{
div#mainpagenav div[style*="border-bottom:2px solid"]{
   border-bottom: 2px solid var(--color-anni-red) !important;
   border-bottom: 2px solid var(--color-anni-red) !important;
}
}


img, div#ccb_elephant{
img, div#ccb_elephant{
   filter: sepia(.35) saturate(1.25) hue-rotate(340deg);
   filter: sepia(.35) saturate(1.25) hue-rotate(340deg);
}
}


.citizen-header:before{
.citizen-header:before{
   filter: sepia(.55) saturate(2.2) hue-rotate(340deg);
   filter: sepia(.55) saturate(2.2) hue-rotate(340deg);
}
}


#profile-toggle-button{
#profile-toggle-button{
第109行: 第105行:
}
}


 
/* Mermaid */
.ext-mermaid svg[id^="mermaid"]{
.ext-mermaid svg[id^="mermaid"]{
   background-color: rgba(255, 244, 246, .8) !important;
   background-color: rgba(255, 244, 246, .8) !important;
   border-color: var(--color-anni-red) !important;
   border-color: var(--color-anni-red) !important;
}
}


.fakelink.nomobile{ color: #9f0f1b !important; }
.fakelink.nomobile{ color: #9f0f1b !important; }
.fakelink.mobileonly{ color: #d81b2a !important; }
.fakelink.mobileonly{ color: #d81b2a !important; }

2026年2月1日 (日) 23:29的版本

/* ========== OTTOWiki 1st Anniversary Theme (Citizen progressive override) ========== */
:root{

  --color-progressive-oklch__l:58%;
  --color-progressive-oklch__c:22%;
  --color-progressive-oklch__h:25;

  --color-progressive-hsl__h:355;
  --color-progressive-hsl__s:78%;
  --color-progressive-hsl__l:47%;

  --color-anni-red: #d81b2a;
  --color-anni-red-deep: #9f0f1b;
  --color-anni-gold: #f3c46b;
  --color-anni-gold-deep: #d8a843;
  --color-anni-pink-bg: #fff4f6;

  --color-anni-icon: var(--color-anni-red);

  --anni-grad-1: var(--color-anni-red);
  --anni-grad-2: var(--color-anni-gold);
  --anni-grad-3: var(--color-surface-2);

  --anni-border: #e9b7bd;
  --anni-soft-text: #7a1b23;
}

.main-banner{
  background:
    radial-gradient(1200px 200px at 20% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, var(--anni-grad-1) 0%, var(--anni-grad-2) 55%, var(--anni-grad-3) 100%) !important;
}

.citizen-search-trigger{
  border-color: var(--anni-border) !important;
}

.ottowiki-toppop{
  border-left: 6px solid var(--color-anni-red) !important;
}

.oo-ui-image-progressive.oo-ui-icon-search,
.mw-ui-icon-search-progressive:before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Esearch%3C/title%3E%3Cg fill='%23d81b2a'%3E%3Cpath d='M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.oo-ui-image-progressive.oo-ui-icon-upTriangle,
.mw-ui-icon-upTriangle-progressive:before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Etriangle upwards%3C/title%3E%3Cg fill='%23d81b2a'%3E%3Cpath d='m10 5 8 10H2z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.oo-ui-image-progressive.oo-ui-icon-downTriangle,
.mw-ui-icon-downTriangle-progressive:before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Edown triangle%3C/title%3E%3Cg fill='%23d81b2a'%3E%3Cpath d='M10 15 2 5h16z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.oo-ui-image-progressive.oo-ui-icon-share,
.mw-ui-icon-share-progressive:before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eshare%3C/title%3E%3Cg fill='%23d81b2a'%3E%3Cpath d='M12 6V2l7 7-7 7v-4c-5 0-8.5 1.5-11 5l.8-3 .2-.4A12 12 0 0 1 12 6'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.oo-ui-image-progressive.oo-ui-icon-bellOutline,
.mw-ui-icon-bellOutline-progressive:before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Ebell%3C/title%3E%3Cg fill='%23d81b2a'%3E%3Cpath d='M11.5 2.19C14.09 2.86 16 5.2 16 8v6l2 2v1H2v-1l2-2V8c0-2.8 1.91-5.14 4.5-5.81V1.5C8.5.67 9.17 0 10 0s1.5.67 1.5 1.5zM10 4C7.79 4 6 5.79 6 8v7h8V8c0-2.21-1.79-4-4-4M8 18h4c0 1.1-.9 2-2 2s-2-.9-2-2'/%3E%3C/g%3E%3C/svg%3E") !important;
}

#ipe-edit-toolbox #toolbox-toggle{ background: var(--color-anni-red-deep); }
#ipe-edit-toolbox .ipe-toolbox-btn#edit-btn{          background: var(--color-anni-red); }
#ipe-edit-toolbox .ipe-toolbox-btn#redirectfrom-btn{  background: #c01623; }
#ipe-edit-toolbox .ipe-toolbox-btn#redirectto-btn{    background: #8b0c16; }
#ipe-edit-toolbox .ipe-toolbox-btn#preference-btn{    background: var(--color-anni-gold-deep); color:#3b2600; }
#ipe-edit-toolbox .ipe-toolbox-btn#renamepage-btn{    background: #e43a44; }
#ipe-edit-toolbox .ipe-toolbox-btn#deletepage-btn{    background: #b91420; }

img.mw-logo-icon{
  filter: hue-rotate(335deg) saturate(170%) brightness(95%) !important;
}

div#mainpagenav div[style*="background-color:#4CAF50"],
div#mainpagenav div[style*="background-color: #4CAF50"],
div#mainpagenav span[style*="background-color:#4CAF50"],
div#mainpagenav span[style*="background-color: #4CAF50"]{
  background: linear-gradient(90deg, var(--color-anni-red) 0%, var(--color-anni-gold) 100%) !important;
}
div#mainpagenav div[style*="background-color:#4CAF50"] > a.mw-redirect,
div#mainpagenav div[style*="background-color: #4CAF50"] > a.mw-redirect,
div#mainpagenav span[style*="background-color:#4CAF50"] > a.mw-redirect,
div#mainpagenav span[style*="background-color: #4CAF50"] > a.mw-redirect{
  color: #fff6e6 !important;
}
div#mainpagenav div[style*="border-bottom:2px solid"]{
  border-bottom: 2px solid var(--color-anni-red) !important;
}

img, div#ccb_elephant{
  filter: sepia(.35) saturate(1.25) hue-rotate(340deg);
}

.citizen-header:before{
  filter: sepia(.55) saturate(2.2) hue-rotate(340deg);
}

#profile-toggle-button{
  background-color: var(--color-anni-red) !important;
}

/* Mermaid */
.ext-mermaid svg[id^="mermaid"]{
  background-color: rgba(255, 244, 246, .8) !important;
  border-color: var(--color-anni-red) !important;
}

.fakelink.nomobile{ color: #9f0f1b !important; }
.fakelink.mobileonly{ color: #d81b2a !important; }