diff --git a/includes/TimelessTemplate.php b/includes/TimelessTemplate.php index 64830d70..ccbab9ff 100644 --- a/includes/TimelessTemplate.php +++ b/includes/TimelessTemplate.php @@ -80,10 +80,10 @@ public function execute() { //add banner -aira@21.11.15 $html .= Html::rawElement( 'div' , [ 'id' => 'siteBanner', 'class' => 'siteBanner' ], - Html::rawElement( 'div' , [ 'id' => 'topHeadingImage', 'class' => 'topHeadingImage', 'style' => 'background-image: url(/kawaii/banner/BG-2022031702.png);' ]). + Html::rawElement( 'div' , [ 'id' => 'topHeadingImage', 'class' => 'topHeadingImage', 'style' => 'background-image: url(/kawaii/banner/BG-20220705.png);' ]). Html::rawElement( 'div' , [ 'id' => 'bannerItems', 'class' => 'bannerItems' ], Html::rawElement( 'a', [ 'href' => '/' ], - Html::rawElement( 'img' , [ 'id' => 'topHeadingLogo', 'class' => 'topHeadingLogo', 'src' => '/kawaii/SeasonLogo-Spring.svg', 'style' => 'filter: drop-shadow(0 4px 5px #fb729980);' ]), + Html::rawElement( 'img' , [ 'id' => 'topHeadingLogo', 'class' => 'topHeadingLogo', 'src' => '/kawaii/SeasonLogo-SummerB2.svg', 'style' => 'filter: drop-shadow(0 4px 5px #4288d380);' ]), ), ). ''); diff --git a/resources/cssvariables.less b/resources/cssvariables.less index f25f9b4a..33d3b163 100644 --- a/resources/cssvariables.less +++ b/resources/cssvariables.less @@ -15,4 +15,13 @@ --color-link-visited: var(--color-link-base); --color-link-new: @link-red; + + --brand-color: #fb7299; + --brand-background-light: #f1e7ea; + --brand-color-light: #f7b0c4; + --player-icon: #77828b; + --player-icon-hover: #52595e; + --player-hover-background: rgba(0, 0, 0, 0.05); + + --border-color: #e2e2e2; } diff --git a/resources/extensions/FlowThread.less b/resources/extensions/FlowThread.less index a130625e..f17418c8 100644 --- a/resources/extensions/FlowThread.less +++ b/resources/extensions/FlowThread.less @@ -4,6 +4,10 @@ border-top: 1px solid rgba(0,0,0,0.11); } +.comment-container > div:first-child { + border-top: 0; +} + .comment-avatar { img { border-radius: 3em; diff --git a/resources/main.js b/resources/main.js index 8633e97e..2f50d549 100644 --- a/resources/main.js +++ b/resources/main.js @@ -223,11 +223,11 @@ $("#mw-site-navigation li, #mw-related-navigation li, #personal li, .mini-block- $(".comment-submit, #profile-toggle-button").addClass("mdui-ripple-white"); /*JUMP*/ -$("#p-banner, #ca-ve-edit a, #ca-edit a, #ca-history a, #ca-watch a, #ca-unwatch a, #ca-nstab-main a, #ca-nstab-template a, #ca-nstab-userwiki a, #ca-nstab-mediawiki a, #ca-nstab-user a, #ca-nstab-help a, #ca-nstab-image a, #ca-nstab-project a, #ca-nstab-media a, #ca-nstab-category a, #ca-nstab-data a, #ca-talk a, #ca-flowthreadcontrol a, #ca-nstab-widget, #t-contributions a, #p-variants-desktop h3, .header-links-a").addClass("jumpanim"); +$("#p-banner, #ca-ve-edit a, #ca-edit a, #ca-viewsource a, #ca-history a, #ca-watch a, #ca-unwatch a, #ca-nstab-main a, #ca-nstab-template a, #ca-nstab-userwiki a, #ca-nstab-mediawiki a, #ca-nstab-user a, #ca-nstab-help a, #ca-nstab-image a, #ca-nstab-project a, #ca-nstab-media a, #ca-nstab-category a, #ca-nstab-data a, #ca-talk a, #ca-flowthreadcontrol a, #ca-timedtext a, #ca-nstab-timedtext a, #ca-nstab-widget a, #t-contributions a, #p-variants-desktop h3, .header-links-a").addClass("jumpanim"); /*修复搜索栏闪动*/ $("#simpleSearch").removeClass("opacityhide"); /*ART*/ -var kawaiiconsole = String("\n✦ あおの星、見つけよう！ ✦\n _____ ______ _____ ___ __ ______ ____ __ __ ______ __ __ ______ \n/\\ __ \\/\\__ _\\/\\ __ \\ \\ \\_\\ \\/\\ _ \\/\\ _ \\ /\\ \\ __/\\ \\/\\__ _\\ /\\ \\/\\ \\ /\\__ _\\ \n\\ \\ \\/\\ \\/_/\\ \\/\\ \\ \\/\\ \\/\\ \\ \\ \\/\\ \\ \\ \\/\\ \\ \\ \\ \\/\\ \\ \\ \\/_/\\ \\/ \\ \\ \\/ / \\/_/\\ \\/ \n \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\__\\ \\ \\ __ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ < \\ \\ \\ \n \\ \\ \\_\\ \\ \\ \\ \\ \\ \\ \\_\\ \\ \\ \\_/\\ \\ \\ \\/\\ \\ \\ \\_\\ \\ \\ \\ \\_\\ \\_\\ \\ \\_\\ \\__\\ \\ \\\\ \\ \\_\\ \\__ \n \\ \\_____\\ \\ \\_\\ \\ \\_____\\ \\_\\\\ \\_\\ \\_\\ \\_\\ \\____/ \\ \\____/___/ /\\_____\\\\ \\_\\ \\_\\ /\\_____\\\n \\/_____/ \\/_/ \\/_____/\\/_/ \\/_/\\/_/\\/_/\\/___/ \\/___//__/ \\/_____/ \\/_/\\/_/ \\/_____/\n\n ✧ Calibur Otomad Wiki ✧\n - Designed by Aira in Shanghai # KAWAII FOREVER #\n - Version: MediaWiki 1.36.2\n - Kawaii.js Build: 2022.06.01 01:01:01\n") +var kawaiiconsole = String("\n✦ あおの星、見つけよう！ ✦\n _____ ______ _____ ___ __ ______ ____ __ __ ______ __ __ ______ \n/\\ __ \\/\\__ _\\/\\ __ \\ \\ \\_\\ \\/\\ _ \\/\\ _ \\ /\\ \\ __/\\ \\/\\__ _\\ /\\ \\/\\ \\ /\\__ _\\ \n\\ \\ \\/\\ \\/_/\\ \\/\\ \\ \\/\\ \\/\\ \\ \\ \\/\\ \\ \\ \\/\\ \\ \\ \\ \\/\\ \\ \\ \\/_/\\ \\/ \\ \\ \\/ / \\/_/\\ \\/ \n \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\__\\ \\ \\ __ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ < \\ \\ \\ \n \\ \\ \\_\\ \\ \\ \\ \\ \\ \\ \\_\\ \\ \\ \\_/\\ \\ \\ \\/\\ \\ \\ \\_\\ \\ \\ \\ \\_\\ \\_\\ \\ \\_\\ \\__\\ \\ \\\\ \\ \\_\\ \\__ \n \\ \\_____\\ \\ \\_\\ \\ \\_____\\ \\_\\\\ \\_\\ \\_\\ \\_\\ \\____/ \\ \\____/___/ /\\_____\\\\ \\_\\ \\_\\ /\\_____\\\n \\/_____/ \\/_/ \\/_____/\\/_/ \\/_/\\/_/\\/_/\\/___/ \\/___//__/ \\/_____/ \\/_/\\/_/ \\/_____/\n\n ✧ Calibur Otomad Wiki ✧\n - Designed by Aira in Shanghai # KAWAII FOREVER #\n - Version: MediaWiki 1.36.2\n - Kawaii.js Build: 2022.06.25 01:53:12\n") console.log('%c%s', 'color: #fb7299', kawaiiconsole); diff --git a/resources/screen-common.less b/resources/screen-common.less index 12c9f752..fd53cfc4 100644 --- a/resources/screen-common.less +++ b/resources/screen-common.less @@ -33,7 +33,7 @@ body { .box; background: @background; padding: 1em @content-padding 3em; - box-shadow: 0 4px 7px 1px rgba( 193, 159, 168, 0.2 ); + box-shadow: none; } @keyframes slide-in-parent { @@ -49,6 +49,8 @@ body { #mw-content-wrapper{ margin-top: 0.95em; animation: slide-in-parent cubic-bezier(0.1,0.9,0.2,1) 0.6s 0.3s backwards; + box-shadow: 0 4px 7px 1px rgba( 193, 159, 168, 0.2 ); + z-index: 1; } #bodyContent { @@ -137,7 +139,7 @@ body { background: #f1f2f3; position: relative; border: solid 1px transparent; - transition: background-color .3s; + //transition: background-color .3s; margin-left: .5em; margin-right: .5em; border-radius: 8px; @@ -174,6 +176,7 @@ body { /* @noflip */ background-position: center 40%; box-shadow: none; + font-size: inherit; } .suggestions { @@ -493,20 +496,29 @@ a.mw-selflink { } .mw-editsection { - padding: 25px 5px 0 5px; + //padding: 25px 5px 0 5px; + padding: 0; + float: right; //background-image: url(images/material-icons/edit_black_24dp.svg); //background-repeat: no-repeat; //background-position: left bottom; a { - padding: 6px 12px; - margin-right: 0; font-size: 15px; color: @tools-color; border-radius: 3em; transition: all .2s; .ca-icon-only(); .ca-icon-material( 'edit' ); + padding: 0; + margin: 0; + display: inline-flex; + justify-content: center; + align-items: center; + align-content: center; + width: 40px; + height: 40px; + border-radius: 50%; &:hover { background: @hover; @@ -1012,20 +1024,32 @@ body :not( :checked ) > .toctogglespan:after { } /* OOUI */ -#mw-wrapper .oo-ui-dropdownWidget-handle .oo-ui-labelElement-label, #mw-wrapper .oo-ui-decoratedOptionWidget .oo-ui-labelElement-label { - line-height: 1.6em; -} +#mw-wrapper { + .oo-ui-dropdownWidget-handle .oo-ui-labelElement-label, #mw-wrapper .oo-ui-decoratedOptionWidget .oo-ui-labelElement-label { + line-height: 1.6em; + } -#mw-wrapper .oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, #mw-wrapper .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { - line-height: 1.6em; -} + .oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, #mw-wrapper .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { + line-height: 1.6em; + } -#mw-wrapper .oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button { - border: none; -} + .oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button { + border: none; + } -#mw-wrapper .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame { - .backdropfx() + .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame { + .backdropfx() + } + + .oo-ui-processDialog .oo-ui-actionWidget.oo-ui-iconElement > .oo-ui-buttonElement-button { + border-color: transparent !important; + box-shadow: none; + transform: none; + } + + .oo-ui-processDialog-content .oo-ui-window-head, .oo-ui-processDialog-content .oo-ui-window-foot { + outline: 0; + } } /*SlideIn Animation*/ @@ -1069,6 +1093,43 @@ body :not( :checked ) > .toctogglespan:after { } } +@keyframes move-in-down { + 0% { + opacity: 0; + -webkit-transform: translate(0, -5em); + transform: translate(0, -5em); + } + + 100% { + opacity: 1; + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } +} + +@keyframes float-in-up { + 0% { + opacity: 0; + -webkit-transform: translate(0, 3em); + transform: translate(0, 3em); + pointer-events: none; + } + + 99% { + opacity: 1; + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + pointer-events: none; + } + + 100% { + opacity: 1; + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + pointer-events: auto; + } +} + @keyframes scale-in { 0% { transform: scale(0); @@ -1099,10 +1160,22 @@ body :not( :checked ) > .toctogglespan:after { } } +.move-in-up { + animation: move-in-up cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s backwards; +} + +.move-in-down { + animation: move-in-down cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s backwards; +} + +.oo-ui-floatableElement-floatable { + animation: float-in-up cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s backwards !important; +} + .suggestions a.mw-searchSuggest-link, .suggestions a.mw-searchSuggest-link:hover, .suggestions a.mw-searchSuggest-link:active, .suggestions a.mw-searchSuggest-link:focus { display: block; -webkit-animation: move-in-left cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s backwards; - animation: move-in-left cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s backwards; + animation: move-in-left cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s backwards; } .mw-body { @@ -1373,7 +1446,7 @@ ul#pagehistory { } /* Fonts Fix */ -.diff-editfont-monospace .diff-addedline, .diff-editfont-monospace .diff-deletedline, .diff-editfont-monospace .diff-context, .mw-body .wikiEditor-ui .ace_editor, .ace_search_field, td.mw-enhanced-rc, .mw-enhanced-rc-time a { +.diff-editfont-monospace .diff-addedline, .diff-editfont-monospace .diff-deletedline, .diff-editfont-monospace .diff-context, .mw-body .wikiEditor-ui .ace_editor, .ace_search_field, td.mw-enhanced-rc, .mw-enhanced-rc-time a, .mw-enhanced-rc-time { font-family: @fonts-mono; } @@ -1448,7 +1521,7 @@ ul#pagehistory { opacity: 0; border-bottom: 2px solid @blue; transform: translate(-50%) scaleX(0); - transition: transform .5s cubic-bezier(0.1,0.9,0.2,1); + transition: transform .8s cubic-bezier(0.1,0.9,0.2,1); } .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label:after { transform: translate(-50%) scaleX(1); @@ -1569,15 +1642,15 @@ input#wpUploadFile { } #wpUploadFile::file-selector-button { - display: none !important; + display: none !important; } #wpUploadFile::-webkit-file-upload-button { - display: none !important; + display: none !important; } #wpUploadFile::-ms-browse { - display: none !important; + display: none !important; } /* Hide Links */ @@ -1625,18 +1698,17 @@ input#wpUploadFile { margin-top: 3px; opacity: 0.51; } -.mw-collapsible-arrow.mw-collapsible-toggle-collapsed:hover:active, .mw-collapsible-arrow.mw-collapsible-toggle-expanded:active { - transform: rotate(90deg) translateX(3px); -} -.mw-collapsible-arrow.mw-collapsible-toggle-collapsed:hover { - transform: rotate(90deg); - opacity: 1; +.mw-collapsible-arrow.mw-collapsible-toggle-collapsed:active { + transform: translateY(3px); } .mw-collapsible-arrow.mw-collapsible-toggle-expanded { transform: rotate(90deg); margin-top: 3px; opacity: 1; } +.mw-collapsible-arrow.mw-collapsible-toggle-expanded:active { + transform: rotate(90deg) translateX(3px); +} #mw-wrapper .mw-editfooter-toggler { background-position: 18px center; padding-left: 38px; @@ -1705,3 +1777,24 @@ select { #headerUpload { display: none; } + +textarea { + font-family: @fonts; +} + +/*Video.js Player*/ + +/*Remove the not aligned handle*/ +/*.video-js .vjs-play-progress:before, .vjs-slider-vertical .vjs-volume-level:before { + content: none !important; +}*/ + +.video-js .vjs-control-bar button { + box-shadow: none !important; + border: 0 !important; + border-radius: 0 !important; + transform: none !important; + &:active { + background-color: var(--player-hover-background); + } +} diff --git a/resources/screen-desktop-mid.less b/resources/screen-desktop-mid.less index f21be892..fca61918 100644 --- a/resources/screen-desktop-mid.less +++ b/resources/screen-desktop-mid.less @@ -4,6 +4,7 @@ #mw-content-block { clear: both; + background-color: white; } #p-logo-text { @@ -23,6 +24,10 @@ overflow: hidden; } +#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk { + box-shadow: none; +} + #mw-related-navigation > div.sidebar-chunk:first-child { margin-top: 0; } @@ -31,6 +36,7 @@ float: right; margin-left: -@column-left-size; width: 100%; + box-shadow: none; } #mw-content, @@ -55,3 +61,7 @@ #user-tools { min-width: 12em; } + +#mw-content-container { + background-color: @background; +} diff --git a/resources/screen-desktop-small.less b/resources/screen-desktop-small.less index 40bfad5c..1da1f223 100644 --- a/resources/screen-desktop-small.less +++ b/resources/screen-desktop-small.less @@ -194,4 +194,8 @@ body { #simpleSearch { margin: 0 auto; -} \ No newline at end of file +} + +#mw-content-wrapper { + box-shadow: none; +} diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less index 30c57746..e1908223 100644 --- a/resources/screen-desktop.less +++ b/resources/screen-desktop.less @@ -81,7 +81,7 @@ div.mw-notification-area { #searchInput { background: transparent; - padding: 0.3em 3.7em 0.3em 1.5em; + padding: 0.3em 2.8em 0.3em 1em; } #simpleSearch { @@ -89,19 +89,27 @@ div.mw-notification-area { background: rgba( 128, 128, 128, 0.1 ); max-width: 22em; margin: 0 1em 0 auto; - border-radius: 3em; - &:hover{ - background: rgba( 128, 128, 128, 0.15 ); - } + border-radius: 6px; + //&:hover{ + // background: rgba( 128, 128, 128, 0.15 ); + //} //&:active, &:focus, &:focus-within{ // border-bottom: 2px solid @blue; //} } #searchButton, #mw-searchButton { - height: 2.4em; - background-size: 88%; + height: 29px; + width: 29px; + margin-top: 4px; + background-size: 60%; background-position: center; + right: 5px; + border-radius: 6px; +} + +#searchButton:hover { + background-color: @hover; } .suggestions { @@ -284,14 +292,26 @@ div.mw-notification-area { background: @hover } - &.dropdown-active:active h3:after { - transform: rotate(-180deg) translateY(-3px); + &:hover { + h3:after { + transform: rotate(-180deg); + } + } + + &:hover:active { + h3:after { + transform: rotate(-180deg) translateY(-3px); + } } &.dropdown-active h3:after { transform: rotate(-180deg); } + &.dropdown-active:active h3:after { + transform: rotate(-180deg) translateY(-3px); + } + h3 { .dropdown-header(); .dropdown-header-after(); @@ -304,6 +324,7 @@ div.mw-notification-area { justify-content: center; align-items: center; align-content: center; + text-align: right; padding: 0 17px 0 14px; height: 36px; font-size: 0.95em; @@ -338,12 +359,6 @@ div.mw-notification-area { color: @text; } } - - &:active { - h3:after { - transform: translateY(3px); - } - } } .client-nojs #p-variants-desktop:hover .dropdown { @@ -385,6 +400,11 @@ div.mw-notification-area { /* Content */ +#mw-content-wrapper { + background-color: @background; + border-radius: 8px; +} + #mw-content-container { margin-top: 0; padding-bottom: 1em; @@ -636,6 +656,15 @@ div.mw-notification-area { font-feature-settings: 'liga'; } +/*最近更改页面*/ +.mw-collapsible-arrow.mw-collapsible-toggle-collapsed:hover:active, .mw-collapsible-arrow.mw-collapsible-toggle-expanded:active { + transform: rotate(90deg) translateX(3px); +} +.mw-collapsible-arrow.mw-collapsible-toggle-collapsed:hover { + transform: rotate(90deg); + opacity: 1; +} + /*参数设置页面*/ .mw-special-Preferences #mw-wrapper { .mw-prefs-buttons{ @@ -709,6 +738,7 @@ div.mw-notification-area { width: 3px; border-radius: 3em; transform: translateY(-25px) scaleY(2); + animation: none; } .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { background-color: @hover; diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less index 51745e9f..0eb25204 100644 --- a/resources/screen-mobile.less +++ b/resources/screen-mobile.less @@ -8,6 +8,7 @@ #mw-content-wrapper { margin-top: 0; padding-top: 0.95em; + box-shadow: none; } #mw-data-after-content, @@ -106,7 +107,7 @@ margin: 0; border-radius: 0; & a{ - padding: 0.6em 1.4em; + padding: 0.7em 1.4em; width: 100%; display: flex; } diff --git a/skin.json b/skin.json index e56d54d7..9263f9a5 100644 --- a/skin.json +++ b/skin.json @@ -1,6 +1,6 @@ { "name": "Kawaii-Timeless", - "version": "2.6.1", + "version": "2.6.2", "author": [ "Isarra Yos", "[https://otomad.wiki/User:%E8%89%BE%E4%BA%86%E4%B8%AA%E6%8B%89 艾了个拉]",