不够可爱!!!

Cockpit管理面板是大部分主流发行版都可以安装的系统管理面板,提供了丰富的功能,操作起来非常直观,是一个很不错的系统管理面板。
20241031_221303.png
但是,对与我这种喜欢二次元风格的人来说,我觉得这个面板的登陆界面虽然算不上丑,但是我觉得不够好看。

开始萌化!

需要修改的文件

个性化Cockpit管理面板相关的资料还是比较少的,我算是第一批啃这个硬骨头的人了。
首先,我先来介绍一下每个文件对应是干什么的:

  • /usr/share/pixmaps/system-logo-white.png这个是系统图标,修改后输入密码的登陆窗口旁边的系统Logo会变成你替换后的图片。
  • /usr/share/icons/hicolor/96x96/apps/fedora-logo-icon.png这个也是系统图标,但是修改后会改变浏览器标签页的小图标。
  • /usr/share/cockpit/branding/default/bg-plain.jpg这个是登陆界面的背景图,可以换成你喜欢的图片。
  • /usr/share/cockpit/static/login.css这是登陆窗口的样式表,可以更改样式。

修改图标以及背景

这步很简单,直接替换大法解决问题。
不过有几点需要注意一下:

  • fedora-logo-icon.png一定是要96X96px的。可能出现奇怪的问题。
  • system-logo-white.png这个图片大小不宜过大,否则适得其反。本人尝试下来,如果是是方形区域内的logo的话,200X200px就比较合适了。
  • bg-plain.jpg这个就比较宽松了,基本上任何尺寸都可以,只要不太离谱。我个人是用的1920X1200px的大小。

修改登陆窗口样式

完成前面那一步,按理来说应该已经比原来好看多了。但是,登陆界面挡了四分之一的背景还是很难受。
于是,我们来修改一下css。
具体的修改方法,浏览器右键检查元素,查找到对应的HTML内容。同时,会看到样式表,这时候就可以尝试在浏览器开发工具更改样式表了。
根据查找,登陆的用户和密码部分的样式表叫:.login-pf .container,稍微调一下背景颜色,就可以半透明了,真不错。
改完之后是这样子:

.login-pf .container {
    background-color: #ffffffe5;
    background: #ffffffe5;
    color: #333;
    padding-block: 3rem 2rem;
    padding-inline: 3rem;
    inline-size: 100%;
    border-radius: 20px;
    
}

下面的细节提示部分叫:.login-pf .details,同样的方法,秒了。

.login-pf .details {
    grid-area: details;
    padding-block: 1.5rem;
    padding-inline: 3rem;
    inline-size: 100%;
    background: #ffe2ebe5;
    border-radius: 20px;
}

以上的样式,我还加了圆角,也就是border-radius: 20px;让界面看起来没这么生硬。
这么你这蓝色的按钮有点煞风景啊,我要改成粉色。
按钮的部分,叫:.pf-m-primary,改一下吧,再加个圆角:

.pf-m-primary {
    background-color: #f0768b;
    border-color: #f0768b;
    color: #fff;
    border-radius: 12px;
}

哎,这么放鼠标上去还是蓝色?!一定是有悬浮事件样式表作祟!
通过查找原来的代码,和按钮定义相关的只剩下这个:.pf-m-primary:active, .pf-m-primary:not([disabled]):focus, .pf-m-primary:not([disabled]):hover
笑点解析:关键词hover,改一下,秒了:

.pf-m-primary:active, .pf-m-primary:not([disabled]):focus, .pf-m-primary:not([disabled]):hover {
    background-color: #d74760;
    border-color: #d74760;
    color: #fff;
    outline: none
}

嗯,这下鼠标悬浮也是粉色了,真不错!
20241031_221325.png

login.css代码

为了方便各位对照,我还是把我改过之后的代码贴出来吧。以下是修改后login.css的内容:

@charset "UTF-8";

@font-face {
    font-family: RedHatText;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/RedHatText-Regular.woff2) format("woff2")
}

@font-face {
    font-family: RedHatText;
    font-style: normal;
    font-weight: 700;
    src: url(fonts/RedHatText-Medium.woff2) format("woff2")
}

*, :after, :before {
    box-sizing: border-box
}

[hidden]:not([hidden=false]) {
    display: none !important
}

html {
    font-family: sans-serif;
    block-size: 100%;
    background: #000
}

body {
    margin: 0;
    font-family: RedHatText, Helvetica, Arial, sans-serif;
    background-color: #333;
    color: #fff;
    line-height: 1.5
}

h1, h2, h3, h4 {
    font-size: 1.125rem;
    font-weight: 400;
    margin: 0
}

h1 {
    font-size: 1.75rem;
    line-height: 1.3;
    padding-block: 0 1rem;
    padding-inline: 0
}

h2 {
    font-size: 1.3rem
}

pre {
    white-space: pre-wrap
}

.pf-v5-c-button, label {
    font-weight: 600
}

.pf-v5-c-button, img {
    vertical-align: middle
}

#option-group, .pf-v5-c-button, .input-clear, button {
    cursor: pointer
}

#option-group svg, .input-clear {
    opacity: .7
}

a, summary {
    color: #06c;
    text-decoration: none
}

.pf-v5-c-button:focus, .host-remove:focus, button:focus, a:focus {
    outline: -webkit-focus-ring-color auto 5px;
    outline: dotted thin;
    outline-offset: -2px
}

a:focus, a:hover {
    color: #fff;
    text-decoration: underline
}

img {
    border: 0
}

button, input, select, textarea {
    font-family: inherit;
    margin: 0;
    font-size: inherit;
    line-height: inherit
}

button {
    overflow: visible;
    border-radius: .1875rem;
    border: none
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

p {
    margin-block: 0 1rem;
    margin-inline: 0
}

.container {
    margin-inline: auto
}

#option-group, #option-group[hidden]+#server-group {
    margin-block-start: 1rem
}

#option-group {
    margin-block-end: 1rem
}

.form-group:not(:first-child) {
    margin-block-start: 1rem
}

.login-actions {
    display: flex;
    align-items: baseline;
    grid-gap: 1rem
}

label {
    display: inline-block
}

#option-group, .control-label {
    font-size: .875rem
}

[role=form] .control-label, form .control-label {
    display: flex;
    align-items: center;
    min-block-size: 2rem;
    padding-block: 0 .5rem;
    padding-inline: 0
}

.form-control {
    color: #151515
}

.pf-v5-c-button.pf-m-control, .form-control[type=password], .form-control[type=text] {
    display: block;
    inline-size: 100%;
    padding-block: .25rem;
    padding-inline: .5rem;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ededed;
    border-block-end-color: #72767b;
    border-radius: 1px;
    transition: border-color .15s ease-in-out;
    color: #151515
}

.pf-v5-c-button.pf-m-control:hover, .form-control[type=password]:hover, .form-control[type=text]:hover, .form-control[type=password]:focus, .form-control[type=text]:focus {
    border-block-end-color: #06c
}

.pf-v5-c-button.pf-m-control:focus, .form-control[type=password]:focus, .form-control[type=text]:focus {
    padding-block-end: calc(.25rem - 1px);
    border-block-end-width: 2px
}

.pf-v5-c-button.pf-m-control:focus, .form-control:focus {
    outline: 0
}

.form-control::placeholder {
    color: #999;
    font-style: italic;
    opacity: 1
}

.checkbox-row {
    margin-block: 1rem 0;
    margin-inline: 0;
    display: flex;
    align-items: baseline
}

.checkbox-row>input[type=checkbox] {
    inline-size: 1rem;
    block-size: 1rem;
    align-self: flex-start;
    margin-block-start: .25rem;
    margin-inline-end: .5rem
}

label.checkbox {
    font: inherit
}

.help-block {
    display: block;
    margin-block: 5px 1rem;
    color: #737373
}

.pf-v5-c-button, .caret {
    display: inline-block
}

.pf-v5-c-button[spinning] .spinner {
    display: inline-flex
}

.form-group:after {
    clear: both;
    margin-block-end: 1rem
}

.pf-v5-c-button {
    text-align: center;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding-block: .375rem;
    padding-inline: 1rem;
    border-radius: 3px;
    font-size: inherit;
    font-weight: 400;
    user-select: none
}

.pf-v5-c-button:focus, .pf-v5-c-button:hover {
    text-decoration: none
}

.pf-v5-c-button:active {
    outline: 0;
    background-image: none
}

.pf-m-primary {
    background-color: #f0768b;
    border-color: #f0768b;
    color: #fff;
    border-radius: 12px;
}

.pf-m-primary:active, .pf-m-primary:not([disabled]):focus, .pf-m-primary:not([disabled]):hover {
    background-color: #d74760;
    border-color: #d74760;
    color: #fff;
    outline: none
}

.pf-m-tertiary {
    background-color: transparent;
    border-color: #151515;
    color: #151515
}

.pf-m-tertiary:active, .pf-m-tertiary:focus, .pf-m-tertiary:hover {
    background-color: transparent;
    border-color: #151515;
    color: #151515;
    border-width: 2px
}

.pf-m-danger {
    background-color: #c9190b;
    border-color: #c9190b;
    color: #fff
}

.pf-m-danger:hover, .pf-m-danger:focus {
    background-color: #a30000;
    border-color: #a30000;
    outline: none
}

.pf-v5-c-button.pf-m-warning {
    background-color: #f0ab00;
    border-color: #f0ab00;
    color: #000
}

.pf-v5-c-button.pf-m-warning:hover, .pf-v5-c-button.pf-m-warning:focus {
    background-color: #c58c00;
    border-color: #c58c00;
    color: #000
}

.login-pf {
    block-size: 100%
}

.login-pf #brand img {
    display: block;
    margin-block: 0;
    margin-inline: auto;
    max-inline-size: 100%
}

.unsupported-browser #brand {
    display: none
}

.login-pf #banner {
    margin-block: 1rem .5rem;
    margin-inline: 0;
    grid-area: banner;
    inline-size: 100%
}

#banner-message {
    white-space: pre-wrap;
    max-block-size: 12em;
    overflow: auto
}

.login-pf .container {
    background-color: #ffffffe5;
    background: #ffffffe5;
    color: #333;
    padding-block: 3rem 2rem;
    padding-inline: 3rem;
    inline-size: 100%;
    border-radius: 20px;
    
}

#main {
    grid-area: login
}

.login-pf .container .details p:first-child {
    border-block-start: 1px solid #474747;
    padding-block-start: 1.5rem;
    margin-block-start: 1.5rem
}

.login-pf .details p {
    margin: 0
}

.login-pf .details p+p {
    margin-block-start: .5rem
}

.login-pf .container .control-label {
    font-weight: 600
}

.login-pf .container .help-block {
    color: #fff
}

.login-pf .container .form-group:last-child, .login-pf .container .form-group:last-child .help-block:last-child {
    margin-block-end: 0
}

.spinner {
    animation: .6s linear infinite rotation;
    border: 4px solid rgba(0, 0, 0, .25);
    border-block-start-color: #000000bf;
    border-radius: 100%;
    block-size: 1.5rem;
    inline-size: 1.5rem
}

.pf-v5-c-alert {
    color: #151515;
    position: relative;
    grid-template-columns: max-content 1fr max-content;
    grid-template-rows: 1fr auto;
    grid-template-areas: "icon title   action"".    content content";
    background-color: #fff;
    margin-block: 0 1.5rem;
    margin-inline: 0;
    display: grid;
    border: 3px solid #009596;
    border-width: 2px 0 0;
    box-shadow: #03030329 0 .5rem 1rem, #03030314 0 0 .5rem
}

.pf-v5-c-alert.pf-m-inline {
    box-shadow: none
}

.pf-v5-c-alert>svg {
    grid-area: icon;
    block-size: 1.125rem;
    inline-size: 1.125rem;
    margin-block: 1.25rem 1rem;
    margin-inline: 1rem;
    float: inline-start;
    color: #009596
}

@supports (display: grid) {
    .pf-v5-c-alert>svg {
        float: none;
        margin-inline-end: 0
    }
}

.pf-v5-c-alert__title {
    grid-area: title;
    font-size: 1rem;
    margin: 1rem
}

.pf-v5-c-alert.pf-m-inline.pf-m-danger {
    background: #faeae8;
    border-color: #c9190b
}

.pf-v5-c-alert.pf-m-danger>svg {
    color: #c9190b
}

.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title {
    color: #a30000
}

.pf-v5-c-alert.pf-m-inline.pf-m-warning {
    background: #fdf7e7;
    border-color: #f0ab00
}

.pf-v5-c-alert.pf-m-warning>svg {
    color: #f0ab00
}

.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title {
    color: #795600
}

.pf-v5-c-alert.pf-m-inline.pf-m-info {
    background: #e7f1fa;
    border-color: #73bcf7
}

.pf-v5-c-alert.pf-m-info>svg {
    color: #73bcf7
}

.pf-v5-c-alert.pf-m-info .pf-v5-c-alert__title {
    color: #004368
}

#server-group:before {
    clear: both;
    margin-block-start: 5px
}

.login-fatal {
    font-size: 130%
}

.unsupported-browser ul {
    display: inline-block;
    margin-block: 0;
    margin-inline: auto;
    text-align: start
}

.unsupported-browser a {
    font-weight: 700
}

.input-clear, .inline .container .help-block {
    color: #000
}

.caret, .server-box {
    position: relative
}

.conversation-prompt {
    white-space: normal;
    word-wrap: break-word
}

.control-label {
    white-space: nowrap
}

.spinner {
    border-color: rgba(255, 255, 255, .75) rgba(255, 255, 255, .25) rgba(255, 255, 255, .25)
}

#hostkey-fingerprint {
    font-size: large;
    font-weight: 700;
    margin-block-end: 0
}

#hostkey-type {
    font-size: small
}

#hostkey-verify-help-cmds {
    border-radius: .25rem;
    padding-block: .5rem;
    padding-inline: 1rem;
    background: #96969633
}

.pf-v5-c-button .spinner, .pf-v5-c-button[spinning] .button-text, .hide-before:before {
    display: none
}

.inline #badge, .inline #brand, .inline #login-details {
    display: none
}

.inline body {
    background: 0 0 !important;
    color: #000
}

.caret {
    vertical-align: middle;
    margin-block: calc((1.5rem - 16px)/2);
    margin-inline: 0;
    margin-inline-end: .25rem;
    transition: all .3s
}

[data-state=true] svg.caret {
    transform: rotate(90deg) translate(-3px);
    transform-origin: .5rem
}

.input-clear {
    display: flex;
    padding-block: .5rem;
    padding-inline: .75rem;
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0
}

.input-clear>svg {
    block-size: 1rem;
    inline-size: auto
}

.form-control:placeholder-shown+.input-clear {
    display: none
}

.server-box>.form-control {
    padding-inline-end: 2rem
}

#option-group:hover svg, .input-clear:hover {
    opacity: 1
}

#option-group div {
    margin-inline-start: -3px;
    margin-block: 3px 1rem
}

.login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 2.5rem;
    flex-basis: 100%
}

#hostkey-group:not([hidden])~.login-actions>.login-button {
    flex-basis: max-content
}

.pf-v5-c-button[disabled] {
    background-color: #333;
    background-image: none;
    border-color: #555;
    cursor: default
}

@media (max-width: 480px) {
    .login-pf {
        display: flex;
        flex-direction: column-reverse;
        position: relative
    }

    .row {
        display: flex;
        flex-direction: column
    }

    .login-pf .container {
        inline-size: 100%;
        padding: 2rem
    }

    .login-pf #badge {
        max-inline-size: calc(100vw - 2rem)
    }

    .login-pf #brand {
        font-size: inherit;
        background-position: 50% 50%
    }

    .details {
        text-align: center
    }
}

@media (min-width: 481px) {
    .unsupported-browser-heading {
        margin-block: 2rem 1rem;
        margin-inline: 0
    }

    .login-pf #brand {
        padding: 0;
        margin-block-end: 1rem
    }
}

@media (min-width: 1024px) {
    .control-label {
        text-align: end
    }

    .login-pf #brand img {
        margin: 0;
        text-align: start
    }

    .login-pf .container .login-area {
        border-inline-end: 1px solid #474747
    }
}

.row {
    display: flex;
    flex-flow: column;
    margin: 0
}

body.login-pf {
    color: #151515;
    display: grid;
    grid-template-areas: "banner""login""details""recent""logo";
    grid-template-rows: repeat(3, auto) 1fr;
    background-position: 0 0 !important;
    padding: 0
}

.login-pf .container .details p:first-child {
    border-block-start: 0;
    padding-block-start: 0;
    margin-block-start: 0
}

.login-button {
    inline-size: 100%
}

.login-pf .details {
    grid-area: details;
    padding-block: 1.5rem;
    padding-inline: 3rem;
    inline-size: 100%;
    background: #ffe2ebe5;
    border-radius: 20px;
}

#recent-hosts {
    grid-area: recent;
    margin-block-start: 1rem;
    padding-block: 3rem 1.5rem;
    padding-inline: 1.5rem
}

#recent-hosts>h1 {
    padding-inline-start: 1.5rem
}

.login-pf #badge {
    grid-area: logo
}

.login-pf .container .login-area {
    border: none;
    inline-size: auto
}

details>summary {
    display: block;
    padding-block: .5rem;
    padding-inline: 0;
    cursor: pointer
}

details>summary:hover {
    text-decoration: underline
}

details[open]>summary>.caret {
    transform: rotate(90deg) translate(-3px)
}

.login-pf #brand {
    text-transform: initial
}

#brand strong, #brand b {
    font-weight: 600
}

.login-pf #brand.text-brand {
    inline-size: auto;
    background: none
}

a:focus, a:hover {
    color: #004080
}

.caret polygon {
    fill: #06c
}

.host-line {
    display: grid;
    grid: 1fr/1fr auto;
    border: 1px solid #d2d2d2;
    border-width: 1px 0
}

.host-line+.host-line {
    border-block-start-width: 0
}

.host-name {
    flex: auto;
    text-align: start;
    color: #06c;
    border: none;
    padding-block: .5rem;
    padding-inline: 1.5rem 1rem
}

.host-name:hover {
    color: #004080;
    text-decoration: underline
}

.host-remove {
    background: transparent;
    margin-inline-end: 1.5rem;
    padding-block: .375rem;
    padding-inline: 1rem;
    position: relative
}

.host-remove:before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background-color: #151515;
    border: none;
    mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 352 512'%3E%3Cpath d='m242.7 256 100-100a31.5 31.5 0 0 0 0-44.5l-22.2-22.3a31.5 31.5 0 0 0-44.4 0L176 189.2 76 89.3a31.5 31.5 0 0 0-44.5 0L9.2 111.5a31.5 31.5 0 0 0 0 44.4l100 100.1-100 100a31.5 31.5 0 0 0 0 44.5l22.3 22.3a31.5 31.5 0 0 0 44.4 0l100.1-100 100 100a31.5 31.5 0 0 0 44.5 0l22.3-22.2a31.5 31.5 0 0 0 0-44.5L242.8 256z'/%3E%3C/svg%3E");
    mask-size: 1rem 1rem;
    opacity: .6
}

.host-remove:focus:before, .host-remove:hover:before {
    opacity: 1
}

@media (max-width: 1023px) {
    body.login-pf {
        justify-items: center
    }

    #badge {
        background-position: center;
        margin: 2rem
    }
}

@media (min-width: 1024px) {
    body.login-pf {
        grid-template-areas: ". banner  banner ."". .       .      ."". login   logo   ."". details logo   ."". recent  logo   ."". .       .      .";
        grid-template-rows: auto 1fr minmax(min-content, max-content) repeat(2, auto) 1fr;
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(auto, 34rem)) minmax(0, 1fr);
        grid-gap: 0 4rem
    }
}

.unsupported-browser ul {
    color: #555;
    margin-block: 0 1rem;
    margin-inline: 0
}

.browser-recommendations {
    margin-block: 1rem 0;
    margin-inline: 0
}

.browser-recommendations h3 {
    font: inherit;
    margin-block-start: 0
}

.dialog-error {
    margin-block: 0 1rem;
    margin-inline: 0
}

#login-again {
    display: block;
    margin-block-start: 1rem
}

.password-with-toggle {
    display: grid;
    grid-template-columns: 1fr auto
}

.pf-v5-c-button.login-password-toggle {
    display: flex;
    align-items: center;
    border-inline-start-width: 0
}

.login-password-toggle>svg {
    block-size: 1rem;
    inline-size: auto
}

input[type=text]+.login-password-toggle .password-show, input[type=password]+.login-password-toggle .password-hide {
    display: none
}

.pf-v5-c-helper-text {
    margin-block-start: 1rem
}

.pf-v5-c-helper-text.pf-m-warning {
    color: #795600
}

.pf-v5-theme-dark .login-pf .container, .pf-v5-theme-dark .login-pf .details {
    z-index: 2
}

.pf-v5-theme-dark .login-pf .container {
    background: #26292d73;
    color: #f0f0f0
}

.pf-v5-theme-dark .login-pf .details {
    background: #15151500;
    color: #f0f0f0
}

.pf-v5-theme-dark .pf-v5-c-button.pf-m-control, .pf-v5-theme-dark .form-control[type=password], .pf-v5-theme-dark .form-control[type=text] {
    background: #393f44;
    border-color: #393f44;
    border-block-end-color: #6c6f72;
    color: #f0f0f0
}

.pf-v5-theme-dark a:active, .pf-v5-theme-dark a:focus, .pf-v5-theme-dark a:hover, .pf-v5-theme-dark a, .pf-v5-theme-dark summary {
    color: #8ac0f6
}

.pf-v5-theme-dark .input-clear, .pf-v5-theme-dark .inline .container .help-block {
    color: #f0f0f0
}

.pf-v5-theme-dark .host-line {
    border-color: #34373b
}

.pf-v5-theme-dark .host-remove:focus {
    outline-color: #f1f1f1
}

.pf-v5-theme-dark .host-remove:before {
    background-color: #f1f1f1
}

.pf-v5-theme-dark .unsupported-browser ul {
    color: #999
}

.pf-v5-theme-dark .pf-v5-c-alert.pf-m-inline.pf-m-danger {
    background: #1e2125;
    border-color: #fe5142
}

.pf-v5-theme-dark .pf-v5-c-alert.pf-m-danger>svg, .pf-v5-theme-dark .pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title {
    color: #fe5142
}

.pf-v5-theme-dark .pf-v5-c-button[disabled] {
    background-color: #444548;
    border-color: #444548;
    color: #c6c7c8
}

.pf-v5-theme-dark .login-pf:after {
    pointer-events: none;
    background: #000;
    opacity: .66;
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1
}

.pf-v5-theme-dark .pf-v5-c-helper-text.pf-m-warning {
    color: #f0ab00
}

@keyframes rotation {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}