Jump to content

佈景主題:Lakeus

From mediawiki.org
This page is a translated version of the page Skin:Lakeus and the translation is 66% complete.
Outdated translations are marked like this.
MediaWiki佈景主題手冊 - 分類
Lakeus
發行狀態: 穩定版
作者
最新版本 1.4.1 (2025-07-19)
相容性方針 Snapshots releases along with MediaWiki. Master is not backwards compatible.
MediaWiki 1.36+
許可協議 GNU General Public License 3.0 or later
下載
範例
參數
  • $wgLakeusShowRepositoryLink
  • $wgLakeusSiteNoticeHasBorder
  • $wgLakeusShouldAnimatePortlets
  • $wgLakeusShowStickyTOC
  • $wgLakeusCustomIndicators
  • $wgLakeusWikiDefaultColorScheme
Public wikis using 3 (Ranked 210th)
Public wikis using as default skin 0
翻譯佈景主題(如果佢喺translatewiki.net上提供嘅話)

Lakeus係一款旨在提供簡潔而完整體驗嘅佈景主題。 以佢嘅作者之一,Lakejason0嘅小説角色命名。

安裝

  • 下載,將佢放置於你skins/文件夾嘅Lakeus目錄中。
  • 將以下代碼添加到你LocalSettings.php 嘅底部:
    wfLoadSkin( 'Lakeus' );
    
  • Yes Done - 喺你嘅wiki上打開Special:Version,確認佈景主題已經安裝成功。

功能

  • 簡潔而完整(起碼大部分功能都可以正常運作)
  • 支援停用JavaScript嘅情形下運作。
  • 使用CSS變數來實現自訂。
  • 響應式設計。 喺桌上設備同埋平板電腦上面嘅顯示應該都係正常嘅。
  • 浮動目次。 可能唔穩定。
  • 主題設計器。 於偏好設定中啟用就可即時預覽及變更主題。 大多數情形下,只需調整幾個變數,主題設計器就可為你計算生成主題。
    • 目前可能存在問題且缺乏穩定,如果你遇到問題,務請向我回報! 如果自動計算結果不及預期,你可隨時將之停用。
  • Upcoming: Dark mode support, similar to Vector .

  • 此佈景主題應該同無JavaScript環境相容。 雖然喺無JavaScript情形下,部分便利特性會無法使用。
  • 此佈景主題為使用帶有LanguageConverter變體語言〔比如中文(語言代碼為zh)同塞爾維亞語〕嘅網站提供一個獨立選單。 當網站無語言變種可用時,選單應該會隱藏自身。
  • RTL書寫方向嘅支援尚未完全測試,但主要功能已通過相容測試(例如邊欄選單)。

自訂

CSS變數

你嘅CSS喺部分特殊頁面上可能唔生效(例如喜好設定);此為MediaWiki本體出於安全考慮所作出嘅預設行為,但係站點管理員可以喺明晰相關風險之後將$wgAllowSiteCSSOnRestrictedPages 設定為true來繞過此特性。
Lakeus is going to support dark mode in newer versions!
Please read Migration to dark mode before your customization, or dark mode will not work and look weird. For site admins and users who have previously done customization via CSS variables, PLEASE be sure to change your CSS accordingly after upgrading Lakeus to versions newer than 1.4.1 (not including).

Lakeus支援使用CSS變數來實現自訂。 以下係製作主題嘅方法示例,如果要將主題結果(應該係CSS代碼)套用,您需要將佢複製到Lakeus.css,可以喺MediaWiki:Lakeus.css(適用於全站用户)或Special:MyPage/Lakeus.css(適用於用户自己)處揾到。

主題設計器

Theme Designer is not ready for dark mode! Although Theme Designer has already supported generating dark-themed colors, the result format is not changed. Please read Migration to dark mode and change the result generated by it accordingly.

主題設計器可為所有人帶來更方便嘅體驗(希望如此)。 你只需變更幾個基本變數,其餘會自動計算。 你可停用相應嘅自動計算,並按照自己意願進行微調。

如要啟用主題設計器,請前往偏好設定,選擇「外觀/顯示」,選中Lakeus佈景主題後,你就可以見到主題設計器選項。 啟用後,主題設計器會於所有頁面載入。

當中嘅按鈕及表單嘅作用基本都同字面意思一樣,如果有不解之處,就試著用下,睇下所起嘅作用。 當然,依然會有部分變數唔會用到每個頁面上,下面都會列出:

  • 介面資訊框。 此類元素會喺類似於以下情況時出現:JavaScript停用時成功更改用户組設定;翻譯頁面編輯提示警告;頁面編輯時MediaWiki拋出嘅異常;Echo或其他通知擴充未安裝時嘅用户討論頁通知。 These are deprecated in newer versions of MediaWiki since Codex is now used instead.
  • Sticky table of contents. The sticky ToC button only appears on pages where ToC is generated. For example if your site has a more advanced main page (and thus does not contain any default headings), the button will not appear.

主題方案集

These preset themes are probably outdated, and thus please be sure to read Migration to dark mode in order to make them work under dark mode.

此處會提供一啲預設主題,供你直接使用。 你亦可以喺討論頁上面分享你嘅主題。 如果此處冇任何內容,請稍後再回來查看。

復古

一個復古主題,最後一次匯出於1.1.7。

Extended content
:root {
    --color-primary: #8e860a;
    --color-secondary: #eeebe7;
    --color-neutral: #a2a9b1;
    --color-warning: #ffcc33;
    --color-error: #dd3333;
    --color-success: #14866d;
    --color-header: rgba(238,235,231,0);
    --color-link: #0645ad;
    --color-secondary--derived: #f8f9fa;
    --border-color-secoundary--derived: #a2a9b1;
    --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #eeebe7;
    --color-link--visited: #001f7d;
    --color-link--active: #5670e0;
    --color-link-new: #dd3333;
    --color-link-new--visited: #a4000c;
    --color-link-new--active: #ff6a5d;
    --color-link-external: #003da3;
    --color-link-external--visited: #001873;
    --color-link-external--active: #5267d5;
    --header-elevation: unset;
    --text-color-header: #000000;
    --icon-filter-header: unset;
    --background-color-search-suggestions: #eeebe7;
    --border-color-search-suggestions: #8c8985;
    --background-color-search-suggestions-current: #8e860a;
    --color-search-suggestions-text: #000000;
    --color-search-suggestions-text-current: #ffffff;
    --background-color-search-input: #eeebe7;
    --border-color-search-bar: #8c8985;
    --background-color-toggle-list: #ffffff;
    --background-color-toggle-list-card: #8e860a;
    --text-color-toggle-list-item: #000000;
    --background-color-toggle-list-item-hover: rgba(0,0,0,0.1);
    --text-color-toggle-list-item-hover: #000000;
    --background-color-toggle-list-item-focus: rgba(0,0,0,0.2);
    --text-color-toggle-list-item-focus: #000000;
    --border-color-toggle-list: #9b9b9b;
    --subheader-color-toggle-list: #6a6a6a;
    --logo-text-color-toggle-list: #ffffff;
    --mask-background: rgba(0,0,0,0.8);
    --background-color-content: #eeebe7;
    --text-color-content: #24220a;
    --background-color-body: #eeebe7;
    --text-color-body: #000000;
    --border-color-content: #bcb9b5;
    --color-accent-header-tab: #8e860a;
    --color-accent-header-tab-selected: #8e860a;
    --color-accent-header-tab-new: #8e860a;
    --border-color-header-tab: #eaecf0;
    --color-tagline: rgba(0,0,0,0.5);
    --font-family-headings: var(--font-family-serif);
    --background-color-edit-options: #eeeeee;
    --border-color-edit-options: #c8ccd1;
    --background-color-toc: #e4e1dd;
    --border-color-toc: #b2afab;
    --color-toc-number: #0d0d0d;
    --border-color-interface-message-box-neutral: #a2a9b1;
    --background-color-interface-message-box-neutral: #e5e7ea;
    --text-color-interface-message-box-neutral: #000000;
    --border-color-interface-message-box-warning: #ffcc33;
    --background-color-interface-message-box-warning: #ffe69a;
    --text-color-interface-message-box-warning: #000000;
    --border-color-interface-message-box-error: #dd3333;
    --background-color-interface-message-box-error: #fae2e2;
    --text-color-interface-message-box-error: #000000;
    --border-color-interface-message-box-success: #14866d;
    --background-color-interface-message-box-success: #d9ebe7;
    --text-color-interface-message-box-success: #000000;
    --border-color-user-message: #ffa500;
    --background-color-user-message: #ffe4b3;
    --text-color-user-message: #000000;
    --background-color-wikitable: #e9e6e2;
    --text-color-wikitable: #030303;
    --border-color-wikitable: #9e9c98;
    --background-color-wikitable-table-head: #dfdcd8;
    --background-color-portlet-body: #ffffff;
    --background-color-portlet-item-hover: rgba(0,0,0,0.1);
    --background-color-portlet-item-focus: rgba(44,44,44,0.1);
    --border-color-portlet-body: #ffffff;
    --background-color-footer: #dad7d3;
    --text-color-footer: #000000;
    --color-footer-link: #0645ad;
    --color-footer-link--visited: #001f7d;
    --color-footer-link--active: #5670e0;
}

海洋

淡藍色配色主題方案,最後一次匯出於1.1.15。

Extended content
:root {
    --color-primary: #3366cc;
    --color-secondary: #f4fcff;
    --color-neutral: #a2a9b1;
    --color-warning: #ffcc33;
    --color-error: #dd3333;
    --color-success: #14866d;
    --color-header: #e2f4fe;
    --color-link: #0645ad;
    --color-secondary--derived: #f8f9fa;
    --border-color-secondary--derived: #a2a9b1;
    --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #f4fcff;
    --color-link--visited: #001f7d;
    --color-link--active: #5670e0;
    --color-link-new: #dd3333;
    --color-link-new--visited: #a4000c;
    --color-link-new--active: #ff6a5d;
    --color-link-external: #003da3;
    --color-link-external--visited: #001873;
    --color-link-external--active: #5267d5;
    --header-elevation: var(--elevation);
    --text-color-header: #000000;
    --icon-filter-header: unset;
    --background-color-search-suggestions: #f4fcff;
    --border-color-search-suggestions: #91989b;
    --background-color-search-suggestions-current: #3366cc;
    --color-search-suggestions-text: #000000;
    --color-search-suggestions-text-current: #ffffff;
    --background-color-search-input: #f4fcff;
    --border-color-search-bar: #91989b;
    --background-color-toggle-list: #f4fcff;
    --background-color-toggle-list-card: #3366cc;
    --text-color-toggle-list-item: #000000;
    --background-color-toggle-list-item-hover: rgba(51,102,204,0.1);
    --text-color-toggle-list-item-hover: #3366cc;
    --background-color-toggle-list-item-focus: rgba(35,93,194,0.2);
    --text-color-toggle-list-item-focus: #3366cc;
    --border-color-toggle-list: #91989b;
    --subheader-color-toggle-list: #0955b8;
    --logo-text-color-toggle-list: #ffffff;
    --mask-background: rgba(0,0,0,0.8);
    --background-color-content: #f4fcff;
    --text-color-content: #000000;
    --background-color-body: #f4fcff;
    --text-color-body: #000000;
    --border-color-content: #c1c9cc;
    --font-family-action-bar: var(--font-family);
    --color-accent-header-tab: #3366cc;
    --color-accent-header-tab-selected: #3366cc;
    --color-accent-header-tab-new: #3366cc;
    --border-color-header-tab: #eaecf0;
    --color-tagline: rgba(0,0,0,0.7);
    --font-family-headings: var(--font-family-serif);
    --background-color-edit-options: #eeeeee;
    --border-color-edit-options: #c8ccd1;
    --background-color-toc: #eaf2f5;
    --border-color-toc: #b7bfc2;
    --color-toc-number: #0d0d0d;
    --border-color-interface-message-box-neutral: #a2a9b1;
    --background-color-interface-message-box-neutral: #e5e7ea;
    --text-color-interface-message-box-neutral: #000000;
    --border-color-interface-message-box-warning: #ffcc33;
    --background-color-interface-message-box-warning: #ffe69a;
    --text-color-interface-message-box-warning: #000000;
    --border-color-interface-message-box-error: #dd3333;
    --background-color-interface-message-box-error: #fae2e2;
    --text-color-interface-message-box-error: #000000;
    --border-color-interface-message-box-success: #14866d;
    --background-color-interface-message-box-success: #d9ebe7;
    --text-color-interface-message-box-success: #000000;
    --border-color-user-message: #ffa500;
    --background-color-user-message: #ffe4b3;
    --text-color-user-message: #000000;
    --background-color-wikitable: #eff7fa;
    --text-color-wikitable: #030303;
    --border-color-wikitable: #a4abae;
    --background-color-wikitable-table-head: #e5ecef;
    --background-color-portlet-body: #ffffff;
    --text-color-portlet-item: #3366cc;
    --background-color-portlet-item-hover: rgba(51,102,204,0.1);
    --text-color-portlet-item-hover: #3366cc;
    --background-color-portlet-item-focus: rgba(112,147,255,0.1);
    --text-color-portlet-item-focus: #3366cc;
    --border-color-portlet-body: #ffffff;
    --background-color-footer: #dfe7ea;
    --text-color-footer: #000000;
    --color-footer-link: #0645ad;
    --color-footer-link--visited: #001f7d;
    --color-footer-link--active: #5670e0;
    --background-color-toc-button: #f4fcff;
    --icon-filter-toc-button: unset;
    --text-color-sticky-toc-number: rgba(51,102,204,0.7);
}
ArchWiki

模仿ArchWiki嘅佈景主題,最後一次匯出於1.1.18.r11.gdf47be3。

Extended content
:root {
    --color-primary: #0077bb;
    --color-secondary: #ffffff;
    --color-neutral: #a2a9b1;
    --color-warning: #ffcc33;
    --color-error: #dd3333;
    --color-success: #14866d;
    --color-header: #333333;
    --color-link: #0077bb;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #f6f9fc;
    --color-link--visited: #004c8a;
    --color-link--active: #57a6ee;
    --color-link-new: #bb4400;
    --color-link-new--visited: #840f00;
    --color-link-new--active: #f47334;
    --color-link-external: #006eb1;
    --color-link-external--visited: #004481;
    --color-link-external--active: #559ce3;
    --header-elevation: inset 0px -5px 0px 0px #08c;
    --text-color-header: #ffffff;
    --icon-filter-header: invert(1) hue-rotate(180deg);
    --background-color-search-suggestions-current: #0077bb;
    --background-color-toggle-list: #ffffff;
    --background-color-toggle-list-card: #0077bb;
    --text-color-toggle-list-item: #000000;
    --background-color-toggle-list-item-hover: rgba(0,119,187,0.1);
    --text-color-toggle-list-item-hover: #0077bb;
    --background-color-toggle-list-item-focus: rgba(0,110,177,0.2);
    --text-color-toggle-list-item-focus: #0077bb;
    --subheader-color-toggle-list: #0065a7;
    --logo-text-color-toggle-list: #ffffff;
    --mask-background: rgba(0,0,0,0.8);
    --background-color-content: #ffffff;
    --text-color-content: #000000;
    --background-color-body: #f6f9fc;
    --text-color-body: #000000;
    --color-accent-header-tab: #0077bb;
    --color-accent-header-tab-selected: #0077bb;
    --color-accent-header-tab-new: #0077bb;
    --color-tagline: rgba(0,0,0,0.7);
    --background-color-portlet-body: #ffffff;
    --text-color-portlet-item: #000000;
    --background-color-portlet-item-hover: rgba(0,119,187,0.1);
    --text-color-portlet-item-hover: #0077bb;
    --background-color-portlet-item-focus: rgba(87,166,238,0.1);
    --text-color-portlet-item-focus: #0077bb;
    --background-color-footer: #f6f9fc;
    --text-color-footer: #000000;
    --color-footer-link: #0077bb;
    --color-footer-link--visited: #004c8a;
    --background-color-toc-button: #ffffff;
    --icon-filter-toc-button: unset;
    --text-color-sticky-toc-number: rgba(0,0,0,0.7);
}


#content {
    border: 1px solid var(--border-color-content);
}

@media screen and ( max-width: 720px ) {
    #content {
    	border-left: none; // no left and right border when #content is as wide as viewport; adjust the value if not appropriate
    	border-right: none;
    }
}

#ca-uls .uls-trigger {
    background-image: none;
    padding-left: 0;
}

手動修改變數

以下係預設嘅CSS變數,可以修改呢啲設置並將設置結果放到你嘅Lakeus.css中。

例如,要將頂欄嘅顏色改為淡藍色(比如#4FC3F7),噉就寫成:

:root {
  --color-header-light: #4FC3F7;
}

Migration to dark mode

While supporting dark mode sounds easy, it will eventually involve your on-site user-generated content (on-site style sheets, templates and inline styles). This section will focus on the skin itself, notably the CSS variables. We will try to comply with standards in Wikimedia wikis, so for on-site content or extra styles of dark mode, see Recommendations for night mode compatibility on Wikimedia wikis . TL;DR: use two blocks of CSS, one with the selector html.skin-theme-clientpref-night, another with both the media query @media screen and (prefers-color-scheme: dark) and selector html.skin-theme-clientpref-os inside.

Since this skin encourages the use of on-site CSS (e.g. MediaWiki:Lakeus.css) to overwrite skin's variables, we couldn't make it clean like other skins; instead, previously introduced variables are still there, but actual values are now transferred to the suffixed variables. For example, if you had styles like this, either from Theme Designer or previous written:

:root {
    --color-primary: #0077bb;
    --color-secondary: #ffffff;
    --color-header: #333333;
    --color-link: #0077bb;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #f6f9fc;
    --color-link--visited: #004c8a;
    --color-link--active: #57a6ee;
    --color-link-new: #bb4400;
    --color-link-new--visited: #840f00;
    --color-link-new--active: #f47334;
    --color-link-external: #006eb1;
    --color-link-external--visited: #004481;
    --color-link-external--active: #559ce3;
    /* ... */
}

Add suffix -light or -dark to each variable, according to the actual content of your code. Though previously Lakeus had not supported dark mode, Theme Designer could produce good result when generating theme with dark background color; if you have done using Theme Designer to produce dark theme, use the -dark suffix, otherwise use -light suffix. The example will use -light suffix, and it should be like this after adding the suffix:

:root {
    --color-primary-light: #0077bb;
    --color-secondary-light: #ffffff;
    --color-header-light: #333333;
    --color-link-light: #0077bb;
    --elevation-light: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base-light: #f6f9fc;
    --color-link--visited-light: #004c8a;
    --color-link--active-light: #57a6ee;
    --color-link-new-light: #bb4400;
    --color-link-new--visited-light: #840f00;
    --color-link-new--active-light: #f47334;
    --color-link-external-light: #006eb1;
    --color-link-external--visited-light: #004481;
    --color-link-external--active-light: #559ce3;
    /* ... */
}

If you want to write your variables for both themes (especially variables for font family since they shouldn't really be separated?), write two blocks of these variables, one with suffix -light and another with -dark.

參數

參數 類型 預設值 描述
$wgLakeusShowRepositoryLink 布爾值 true 決定是否於頁腳處展示指向此佈景主題倉庫嘅連結。
$wgLogos 目前,只有iconwordmark會被使用;其餘鍵名(例如svg1x1.5x2x等)唔會被此佈景主題使用。 請注意,其他佈景主題亦有可能使用由icon提供嘅圖片。與此同時亦會使用其他鍵名,因此請勿用以上鍵名嘗試為此佈景主題提供單獨圖標。
$wgLakeusSiteNoticeHasBorder 布爾值 false 決定是否為站點通知啟用一個由佈景主題提供嘅邊框。 啟用此功能有助於提升純文字通知嘅美觀度,但如果通知內容本身就有邊框,你亦可以選擇保留預設值,不作啟用。
$wgLakeusShouldAnimatePortlets 布爾值 false 決定是否啟用選單動畫(例如打開同關閉選單時嘅淡出淡入)。啟用後可能會由於z-index問題造成視覺效果嘅瑕疵。
$wgLakeusShowStickyTOC 布爾值 false 決定是否顯示浮動目次。
$wgLakeusCustomIndicators Array [] 試驗性 Adds custom skin-wide indicators. This is PROBABLY NOT how you should add page status indicators and therefore experimental. This array consists of data of indicators, and each entry should consist of 3 properties: id, class, html. It is suggested to follow the format of proper indicators added in wikitext, which means:
  • id should be a string prefixed with mw-indicator- with a unique name of the indicator after the prefix.
    • Indicators in wikitext take precedence, that is, indicators added by this variable are ignored when they have the same id with ones added by wikitext.
  • class is always the string mw-indicator.
  • html is a string consists of HTML fragment of the indicator.
    • A <div> tag with the class mw-parser-output is always present as the container tag, since normally contents of indicators are parsed wikitext. The container tag is not present in indicators added by MediaWiki core, like help links indicators on special pages. Write the content as you like.
$wgLakeusWikiDefaultColorScheme String 'light' Determine the default color scheme of the wiki when choosing "Use wiki default" in Preferences. Available values:
  • 'light': Use light theme by default.
  • 'dark': Use dark theme by default.
  • 'os': Use user's browser settings by default.

側邊欄圖示

十分遺憾,想要向佈景主題添加圖示而唔喺頁面上載入大量圖像係唔太可能嘅。 如果你能夠忍受載入網路字體圖示所需嘅時間,可以嘗試用以下方式添加圖示。 首先,引入圖示嘅字體(Font face)(本例使用Material Icons)到你嘅CSS(Lakeus.css)中。 你可能喺Lakeus.css以外嘅地方載入過部分字體,此時只需要確保佢哋唔會相互衝突就得。

/* MD Icons */
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v70/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

然之後,由於本例使用咗偽元素,我哋會用一啲邊距同埋額外嘅設定來為圖示留出空間。

.toggle-list__list a {
    padding-left: calc(8px + 25px);
}

.toggle-list__list a::before {
    content: '';
    width: 0;
    height: 0;
    display: inline-block;
    font-family: 'Material Icons';
    font-size: 18px;
    transform: translateX(-25px) translateY(3px);
    /* Display Optimizing */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

依家即可添加實際圖示。 你可以使用開發者工具(右擊網頁,選擇「檢測」來打開)來查看列表項嘅ID,然後設定實際嘅元素(圖示)內容:

/* Navigation */
#n-mainpage-description a::before {
    content: 'home';
}

#n-recentchanges a::before {
    content: 'auto_awesome';
}

#n-randompage a::before {
    content: 'shuffle';
}

#n-portal a::before {
    content: 'forum';
}

#n-help-mediawiki a::before {
    content: 'help_center';
}

本例中,Material Icons支援特定嘅字串(此處所用嘅)同埋一啲字元碼位,可用來展示對應圖示。 Material Icons支援嘅字串同碼位請見- Google Fonts。 你可以隨意為自己嘅站點添加更多規則,例如某位作者嘅站點有個管理員告示板:

#n-adminnoticeboard a::before {
    content: 'groups';
}

#n-...嘅部分同你喺MediaWiki:Sidebar中使用嘅系統訊息相對應。

個人選單圖示

個人選單同上面基本一樣。

Extended content
/* Personal Menu */
#p-personal a {
    padding-left: calc(0.75em + 25px);
}

#p-personal a::before {
    content: '';
    width: 0;
    height: 0;
    display: inline-block;
    font-family: 'Material Icons';
    font-size: 18px;
    transform: translateX(-25px) translateY(3px);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

#pt-userpage a::before {
    content: 'person';
}

#pt-mytalk a::before {
    content: 'chat_bubble';
}

#pt-adminlinks a::before {
    content: 'admin_panel_settings';
}

#pt-preferences a::before {
    content: 'settings';
}

#pt-betafeatures a::before {
    content: 'science';
}

#pt-watchlist a::before {
    content: 'star';
}

#pt-mycontris a::before {
    content: 'emoji_events';
}

#pt-logout a::before {
    content: 'logout';
}

#pt-login a::before {
    content: 'login';
}

#pt-createaccount a::before {
    content: 'person_add';
}

圖庫