.about.gui-settings-footer { height: 24px; font-size: 14px; justify-content: space-between; padding: 6px 24px; border-top: 1px dashed #8884; } .about.gui-settings-footer>span { opacity: 0.2; } .bilibili-evolved-about { display: flex; width: 400px; height: 70vh; background-color: white; position: fixed; top: 15%; left: calc(50% - 200px); z-index: 100000; box-shadow: 0px 3px 20px 2px #0004; border-top: 4px solid var(--theme-color); flex-direction: column; transition: all .2s ease-out; transform-origin: center; transform: scale(0); } .bilibili-evolved-about.opened { transform: scale(1); } .bilibili-evolved-info a { margin: 0 4px; } .bilibili-evolved-info>p { margin: 8px 0; } .bilibili-evolved-about>div { flex: 1 0 0; display: flex; align-items: center; justify-content: space-between; flex-direction: column; padding: 8px; } .bilibili-evolved-about>div.about-block { flex: 4 0 0; padding: 32px; align-items: stretch; } .bilibili-evolved-about h1 { font-size: 36px; margin-bottom: 16px; } .bilibili-evolved-about h2 { font-size: 18px; margin-bottom: 8px; } .open-source-components>li { margin: 12px 0; padding: 12px 24px; background: rgba(0, 0, 0, 0.2); border-left: 4px solid var(--theme-color); cursor: pointer; transition: all .2s ease-out; } .open-source-components>li:hover { opacity: 0.8; } .component-name { font-size: 18px; font-weight: bold; } .component-info { margin-top: 8px; } #about-link { cursor: pointer; transition: all .2s; } .bilibili-evolved-about a { color: var(--theme-color); } #about-link:hover { opacity: 1; color: var(--theme-color); } #about-close { background-color: #8884; border-color: transparent; opacity: 1; transition: all .2s ease-out; width: 80px; height: 32px; color: inherit; cursor: pointer; } #about-close:hover { opacity: 0.8; } #about-close:active { outline: none; opacity: 0.6; }