From 762f59e5b1c63f7b05abd13243c9299dcfeb307c Mon Sep 17 00:00:00 2001 From: akira Date: Thu, 9 Dec 2021 19:45:35 -0300 Subject: [PATCH] my userstyles! --- userstyles/Apple-Tube_Copy.css | 5174 ++++++++++++++++++++++++ userstyles/Apple-Tube_Plus.css | 104 +- userstyles/Apple-Tube_Plus.css~ | 87 + userstyles/Tootmorphism.css | 113 +- userstyles/Tootmorphism.css~ | 224 + userstyles/spriters_resource_plus.css | 104 + userstyles/spriters_resource_plus.css~ | 104 + 7 files changed, 5842 insertions(+), 68 deletions(-) create mode 100644 userstyles/Apple-Tube_Copy.css create mode 100644 userstyles/Apple-Tube_Plus.css~ create mode 100644 userstyles/Tootmorphism.css~ create mode 100644 userstyles/spriters_resource_plus.css create mode 100644 userstyles/spriters_resource_plus.css~ diff --git a/userstyles/Apple-Tube_Copy.css b/userstyles/Apple-Tube_Copy.css new file mode 100644 index 0000000..1194584 --- /dev/null +++ b/userstyles/Apple-Tube_Copy.css @@ -0,0 +1,5174 @@ +/* ==UserStyle== +@name APPLE-TUBE (COPY) (BIG 2020 UPDATE) +@namespace USO Archive +@author Simon Galver +@description `If you're an Apple fanboy you'll definitely like this style, because it gives YouTube a more refined touch. This theme adds rounded corners, a better darkmode, blurry backgrounds, shadows and overall a just better looking UI.!!!ONLY USE WITH YOUTUBE DARKMODE ACTIVATED!!!WORKS BETTER WITH CHROME OR OPERA SINCE THERE IS NO OFFICIAL SUPPORT FOR BACKDROP FILTERS IN MOZILLA FIREFOX (Otherwise you won’t have blurry backgrounds, but transparent backgrounds. This doesn’t look very well)IF YOU USE CHROME PLEASE ENABLE THIS FLAG: chrome://flags/#enable-experimental-web-platform-featuresIF YOU USE OPERA PLEASE ENABLE THIS FLAG: opera://flags/#enable-experimental-web-platform-featuresKnown Issues:- Rainbow Theme: Rainbow Elements are not synchronised` +@version 20201103.21.37 +@license CC-BY-NC-4.0 +@preprocessor uso +@advanced dropdown colortheme "Color Theme" { + cyan "Cyan*" << ytd-toggle-button-renderer.ytd-live-chat-frame { + border-radius: 9px; +} + /*menu checkbox*/ +.ytp-menuitem-toggle-checkbox { + border-radius: 10px !important; +} +/*endscreen subscribe card*/ +.subscribecard-endscreen .ytp-subscribe-card { + background: rgba(0, 0, 0, 0.75) !important; + border-radius: 15px !important; + backdrop-filter: blur(10px) !important; +} +/*endscreen link icon border radius / backdrop filter*/ +.ytp-ce-expanding-icon { + background-color: #2323237a !important; + border-radius: 6px !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; +} +/*movie bg delete*/ +ytd-thumbnail.ytd-rich-movie-renderer:before { + background-color: transparent !important; +} +/*time duration video endscreen*/ +.ytp-ce-video-duration { + background-color: rgba(53, 53, 53, 0.49) !important; + border-radius: 7px !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; +} +/*yt ad badge color*/ +#ad-badge.ytd-action-companion-ad-renderer, #ad-badge.ytd-promoted-sparkles-web-renderer { + background: #404040 !important; + color: #b1b1b1 !important; +} +/*next video preview text bg delete*/ +.ytp-tooltip.ytp-text-detail.ytp-preview .ytp-tooltip-text { + background-color: transparent !important; +} +/*yt text ad color / backdrop filter*/ +.ytp-ad-text-overlay { + background-color: rgba(31, 31, 31, 0.39) !important; + border: 1px solid rgba(76, 76, 76, 0.42) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 10px !important; +} +/*yt text ad text color / shadow delete*/ +.ytp-ad-overlay-link { + color: #cacaca !important; + text-shadow: none !important; +} +/*yt text ad text shadow delete*/ +.ytp-ad-overlay-title { + text-shadow: none !important; +} +/*yt text ad close button bg color*/ +.ytp-ad-text-overlay .ytp-ad-overlay-ad-info-button-container .ytp-ad-button svg, .ytp-ad-text-overlay .ytp-ad-overlay-close-button svg { + background: #4e4e4e !important; +} + +/*yt ad (premium / music) close button bg color / border radius*/ +#dismiss-button.ytd-banner-promo-renderer[is-icon-button] { + border-radius: 8px !important; +} +/*ad preview container bg color / backdrop filter*/ +.ytp-ad-preview-container, .ytp-ad-message-container { + background: rgba(56, 56, 56, 0.4) !important; + border-radius: 10px !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + margin-right: 10px; +} +/*ad preview image border radius*/ +.ytp-ad-preview-image>.ytp-ad-image { + border-radius: 0px 10px 10px 0px !important; +} +/*ad button bg*/ +.custom-button[active] { + background: #00abff66 !important; +} +/*ad button border radius*/ +.custom-button { + border-radius: 10px !important; +} +/*call-to-action button text color*/ +ytd-promoted-sparkles-web-renderer.sparkles-light-cta #action-button.ytd-promoted-sparkles-web-renderer ytd-button-renderer.ytd-promoted-sparkles-web-renderer { + color: #000000 !important; +} +/*skip button border delete*/ +.ytp-ad-skip-button:hover, .ytp-ad-skip-button { + border: none !important; +} +/*skip button bg color / backdrop filter*/ +span.ytp-ad-skip-button-container { + background-color: rgba(50, 50, 50, 0.5) !important; + margin-right: 10px; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 10px !important; +} +/*ad info container bg color / backdrop filter*/ +.ytp-flyout-cta .ytp-flyout-cta-body, .ytp-flyout-cta .ytp-flyout-cta-body:hover { + background-color: rgba(56, 56, 56, 0.4) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + z-index: -1 !important; + border-radius: 10px !important; +} +/*ad info text color*/ +.ytp-flyout-cta .ytp-flyout-cta-headline-container, .ytp-flyout-cta .ytp-flyout-cta-description-container { + color: #fff !important; +} +/*ad info button bg color / border radius*/ +.ytp-flyout-cta .ytp-flyout-cta-action-button { + background: #0090ffb8 !important; + border: none !important; + border-radius: 5px !important; +} +/*ad call to action button bg color / border radius*/ +.ytp-ad-action-interstitial-action-button { + background-color: #167ac659 !important; + color: #167ac6 !important; + border-radius: 10px !important; +} +/*ad like / dislike container border radius*/ +.ytp-ad-instream-user-sentiment-container { + background: rgba(29, 29, 29, 0.35) !important; + border-radius: 10px !important; + margin-right: 10px !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; +} +/*image border radius*/ +img { + border-radius: 10px !important; +} +/*ad border radius*/ +a#click-target { + border-radius: 10px !important; +} +/*ad badge bg color*/ +.badge-style-type-ad.ytd-badge-supported-renderer { + background: #3c3c3b !important; +} +/*ad bg color delete*/ +body.date-20200214.en_US.ltr.exp-invert-logo.exp-kevlar-settings.exp-responsive.exp-search-big-thumbs.site-center-aligned.site-as-giant-card.webkit.webkit-537.inverted-hdpi { + background-color: transparent !important; +} +/*explaining popup color*/ +yt-tooltip-renderer { + --yt-button-color: #ffffff !important; + background-color: #3e3e3e9e !important; + color: #d4d4d4 !important; +} +/*explaining popup arrow right color*/ +yt-tooltip-renderer[position-type="OPEN_POPUP_POSITION_RIGHT"]::before { + border-color: transparent #3e3e3e transparent transparent !important; +} +/*explaining popup arrow below color*/ +yt-tooltip-renderer[position-type="OPEN_POPUP_POSITION_TOPRIGHT"]::before { + border-color: #3e3e3e transparent transparent transparent !important; +} +/*explaining popup arrow above color*/ +yt-tooltip-renderer[position-type="OPEN_POPUP_POSITION_BOTTOMLEFT"]::before { + border-color: transparent transparent #3e3e3e transparent !important; +} +/*explaining popup arrow left color*/ +yt-tooltip-renderer[position-type="OPEN_POPUP_POSITION_LEFT"]::before { + border-color: transparent transparent transparent #3e3e3e!important; +} +/*yt mini survey border radius*/ +ytd-single-option-survey-option-renderer[vertical] { + border-radius: 10px !important; +} +/*subtitles bg color / backdrop filter*/ +/* span.ytp-caption-segment { + background-color: rgba(50, 50, 50, 0.50) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 10px !important; +} +/*info popup backdrop filter / border radius*/ +.ytp-tooltip-text, #tooltip.paper-tooltip, span.ytp-ad-toggle-button-tooltip { + background: rgba(50, 50, 50, 0.50) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 8px !important; +} +/*merchandiese next button shadow delete*/ +.arrow.ytd-merch-shelf-renderer { + box-shadow: none !important; +} +/*shop button / ... background color / border radius*/ +#shop-button.ytd-merch-shelf-item-renderer { + background-color: rgba(0, 149, 255, 0.26) !important; + border-radius: 10px !important; + color: var(--yt-spec-call-to-action) !important; +} + /*yt top background*/ +html[dark] { + background-color: #272727 !important; +} + /*view all button redesign*/ +#view-all-endpoint.yt-simple-endpoint.ytd-vertical-watch-card-list-renderer { + border-bottom: none !important; + margin-left: 140px !important; + border-radius: 10px !important; + padding: 10px !important; + background: #4040406e !important; + margin-right: 165px !important; +} + /*mix videowall on thumbnail*/ +.ytp-videowall-still[data-is-list=true]:not([data-is-mix=true]) .ytp-videowall-still-listlabel-regular, .ytp-videowall-still[data-is-mix=true] .ytp-videowall-still-listlabel-mix { + background: rgba(50, 50, 50, 0.50) !important; + backdrop-filter: blur(5px) !important; + -webkit-backdrop-filter: blur(5px) !important; + padding-left: 10px !important; + margin-bottom: 6px !important; + border-radius: 0px 0px 10px 10px !important; + margin-right: 6px !important; + margin-left: 6px !important; +} + /*thumbnail time backdrop filter*/ +ytd-thumbnail-overlay-time-status-renderer, .ytp-videowall-still-info-duration { + background-color: rgba(0, 0, 0, 0.4) !important; + border-radius: 5px !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(5px) !important; +} + /*yt original hover info*/ +#hover.ytd-poster-renderer { + border-radius: 10px !important; +} + /*secondary side container thumbnail border radius*/ +.title-fade.ytd-watch-card-hero-video-renderer { + border-radius: 10px !important; +} + /*secondary side container thumbnail border radius*/ +ytd-single-hero-image-renderer { + border-radius: 10px !important; +} + /*secondary side container image border radius*/ +#section-left.ytd-collage-hero-image-renderer { + border-radius: 10px !important; +} +/*miniplayer show more fix*/ + #card.ytd-miniplayer { + z-index: 10 !important; +} + /*playlist panel border radius*/ +.playlist-items.ytd-playlist-panel-renderer { + border-radius: 0px 0px 12px 12px !important; +} +/*miniplayer shadow delete*/ +ytd-miniplayer { + box-shadow: none !important; +} +/*miniplayer shadow delete*/ +.html5-video-player.ytp-player-minimized:not(.ended-mode):not(.cued-mode):not(.unstarted-mode) { + box-shadow: none !important; +} +/*miniplayer margin*/ +ytd-miniplayer.style-scope.ytd-app { + margin-bottom: 15px !important; + margin-right: 10px !important; +} +/*miniplayer info bar border radius / backdrop filter / color*/ +#info-bar.ytd-miniplayer { + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 0px 0px 13px 13px !important; + z-index: -1 !important; + background-color: rgba(50, 50, 50, 0.50) !important; +} +/*miniplayer background delete*/ +ytd-miniplayer, .video.ytd-miniplayer, #card.ytd-miniplayer { + background-color: transparent !important; +} +/*miniplayer container border radius*/ +#player-container.ytd-miniplayer { + border-radius: 13px !important; +} +/*live badge text*/ + .ytp-videowall-still[data-is-live=true] .ytp-videowall-still-info-live { + color: #272727 !important; +} +/*thumbnail overlay (play all) bg color*/ +ytd-thumbnail-overlay-hover-text-renderer { + background-color: rgba(0, 0, 0, 0.5) !important; +} +/*channel menu item border radius*/ +ytd-account-item-renderer.style-scope.ytd-account-item-section-renderer, paper-item.list-item.style-scope.ytd-account-settings { + border-radius: 10px !important; +} +/*movie player theater container border radius*/ +ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy, ytd-watch-flexy[fullscreen] #player-theater-container.ytd-watch-flexy { + border-radius: 13px !important; +} +/*info card teaser backdrop filter*/ +.ytp-cards-teaser { + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 7px !important; +} +/*info card teaser background / border radius*/ +.ytp-cards-teaser .ytp-cards-teaser-box { + background: rgba(50, 50, 50, 0.50) !important; + border-radius: 7px !important; + border: none !important; +} +/*info card teaser text color*/ +.ytp-cards-teaser .ytp-cards-teaser-text { + color: #fff !important; +} +/*buy button background / text color*/ +#button.yt-live-chat-message-buy-flow-renderer, yt-button-renderer.style-primary[is-paper-button], #action.ytd-action-companion-ad-renderer { + background-color: rgba(0, 149, 255, 0.26) !important; + border-radius: 10px !important; + color: #3ea6ff !important; +} +/*member tier selected item border radius(sponsorship offer)*/ +.offer-overview-item.selected.ytd-sponsorships-offer-with-video-renderer, .offer-overview-item.ytd-sponsorships-offer-with-video-renderer:not(:last-of-type) { + border-radius: 10px !important; + border: none !important; +} +/*member tier selected item border delete(sponsorship offer)*/ +.offer-overview-item.ytd-sponsorships-offer-with-video-renderer:not(:last-of-type) { + border: none !important; +} +/*member tier selected item (sponsorship offer)*/ +.style-included-perks.ytd-sponsorships-expandable-message-renderer #message-container.ytd-sponsorships-expandable-message-renderer, .style-unspecified.ytd-sponsorships-expandable-message-renderer #message-container.ytd-sponsorships-expandable-message-renderer { + border-radius: 10px !important; +} +/*member tier selected item info border radius(sponsorship offer)*/ +.style-included-perks.ytd-sponsorships-expandable-message-renderer #content-container.ytd-sponsorships-expandable-message-renderer, .style-unspecified.ytd-sponsorships-expandable-message-renderer #content-container.ytd-sponsorships-expandable-message-renderer { + border-radius: 10px !important; + margin-top: 5px; +} +/*yt original header border radius*/ +ytd-watch-card-rich-header-renderer { + border-radius: 10px !important; + margin-bottom: 5px !important; +} +/*yt button border radius*/ +ytd-call-to-action-button-renderer[button-color=OPAQUE_BLACK] #overlay-button.ytd-call-to-action-button-renderer { + border-radius: 7px !important; +} +/*bottom right info renderer*/ + paper-toast#toast { + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + background: rgba(50, 50, 50, 0.50) !important; +} +/*border delete*/ +ytd-rich-shelf-renderer[is-show-more-hidden] #dismissable.ytd-rich-shelf-renderer { + border-bottom: none !important; +} +/*yt background*/ +ytd-two-column-browse-results-renderer.style-scope.ytd-browse, ytd-search.style-scope.ytd-page-manager, ytd-browse.style-scope.ytd-page-manager { + background: #191919 !important; +} +/*live chat info card*/ +#card.yt-live-chat-viewer-engagement-message-renderer { + background-color: #272727; + border-radius: 10px !important; +} +/*filter text fix*/ +#label.ytd-search-filter-renderer { + background: none !important; +} +/*set reminder border radius*/ +#buttons.ytd-rich-grid-video-renderer > *.ytd-rich-grid-video-renderer { + margin-top: 4px; + border-radius: 7px !important; +} +/*menu backdrop filter (channel / upload video / ...)*/ +ytd-multi-page-menu-renderer[background-color-update], ytd-menu-popup-renderer, #contentWrapper.iron-dropdown > * { + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; +} +/*show more button border delete / color*/ +paper-button.style-scope.yt-next-continuation { + border: none !important; + color: gray !important; +} +/*show more button redesign*/ +yt-formatted-string.style-scope.yt-next-continuation { + background: #48484852 !important; + padding: 7px !important; + border-radius: 8px !important; +} +/*playlist overlay backdrop filter*/ +ytd-thumbnail-overlay-side-panel-renderer { + background: rgba(50, 50, 50, 0.30) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + margin-bottom: -2px !important; + border-radius: 0px 12px 12px 0px; +} +/*notification counter redesign*/ +#notification-count.ytd-notification-topbar-button-renderer { + border-radius: 100% !important; + width: 10% !important; + color: black; + background-color: #ffc0cb; + + box-shadow: pink 0px 0px 50px 15px; + border: 2px solid #0000; +} +/*yt post background color*/ +ytd-post-renderer[uses-compact-lockup_] { + background-color: #1d1d1d !important; +} +/*searchbar remove text color (already searched)*/ +.sbsb_i { + color: #919191 !important; +} +/*set reminder (premiere)*/ +#buttons.ytd-grid-video-renderer > *.ytd-grid-video-renderer { + border-radius: 7px !important; +} +/*liked by creator heart border*/ +#hearted-border.ytd-creator-heart-renderer { + color: #181818 !important; +} +ytd-rich-grid-renderer { + margin: 0 24px 0 35px !important; +} +/*endscreen playlist count backdrop filter*/ +.ytp-ce-playlist-count { + background-color: rgba(0, 0, 0, 0.15) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 0px 0px 10px 10px; +} + /*outline delete*/ +.style-scope:focus { + outline: none; +} +/*view email button border radius*/ +ytd-button-renderer[is-paper-button][align-by-text]:not(:empty) { + margin-left: -16px; + border-radius: 10px !important; +} +/*sidebar width*/ +#contentContainer.app-drawer { + width: 249px !important; + padding-left: 3px !important; + } +/*sidebar hover border radius*/ +.ytd-guide-section-renderer #endpoint:hover { + border-radius: 10px !important; + } +/*sidebar selected border radius*/ +ytd-guide-entry-renderer[active] { + border-radius: 10px !important; +} +/*sidebar selected border radius*/ +paper-item.style-scope.ytd-guide-entry-renderer::before { + border-radius: 10px !important; +} +/*survey border delete*/ +ytd-primetime-promo-renderer.ytd-rich-section-renderer, ytd-inline-survey-renderer.ytd-rich-section-renderer { + border: none !important; +} +/*survey sent border radius / color*/ +#dismissed.ytd-inline-survey-renderer { + border-radius: 15px !important; + background-color: #252a3abd !important +} +/*survey checkmark margin*/ +#checkmark.paper-checkbox { + margin-top: 1px !important; + margin-left: -1px !important; +} +/*survey chechbox border radius*/ + #checkbox.paper-checkbox { + border-radius: 7px !important; +} +/*survey container dismiss border radius / color*/ +#dismiss-button.ytd-inline-survey-renderer { + background-color: #252a3aad !important; + border-radius: 0px 15px 15px 0px !important; +} +/*survey checkbox / title container border radius*/ +paper-checkbox.style-scope.ytd-checkbox-survey-option-renderer { + border-radius: 10px !important; +} +/*survey checkbox / title container border radius / color*/ +ytd-checkbox-survey-option-renderer.ytd-inline-survey-renderer { + background-color: #44444436 !important; + border-radius: 10px !important; +} +/*survey expanded container border radius / color / padding*/ +ytd-inline-survey-renderer[expanded] #dismissable.ytd-inline-survey-renderer { + background-color: #252a3aad !important; + border-radius: 15px 0px 0px 15px !important; + padding: 4px !important; +} +/*survey (video / title) container border radius / color*/ +#inline-survey-compact-video-renderer.ytd-inline-survey-renderer { + border-radius: 13px !important; + background-color: #121212ab !important; +} +/*survey container border radius / color*/ +#star-survey.ytd-inline-survey-renderer { + border-radius: 15px !important; + background-color: #252a3a94 !important; +} +/*yt header border radius fix*/ +#container.ytd-masthead { + border-radius: 0px !important; +} +/*merchandise border bottom fix*/ + ytd-video-secondary-info-renderer { + border-bottom: none !important; +} +/*dark theme background fix*/ +#label.ytd-toggle-theme-compact-link-renderer { + background: none !important; +} +/*video shadow fix (channel)*/ +.html5-video-player:not(.ytp-transparent), .html5-video-player.unstarted-mode, .html5-video-player.ad-interrupting, .html5-video-player.ended-mode, .html5-video-player.ytp-fullscreen { + box-shadow: none !important; +} + + /*[[pbvs]]*/ + +/*dropdown menu border radius*/ +paper-item.style-scope.ytd-menu-navigation-item-renderer { + border-radius: 10px !important; +} +/*video setting menu border radius*/ +.ytp-menuitem-icon { + border-radius: 10px 0px 0px 10px !important; +} +/*video setting menu border radius*/ +.ytp-menuitem-content { + border-radius: 0px 10px 10px 0px !important; +} +/*next button background fix*/ +.ytp-button:not([aria-disabled=true]):not([disabled]):not([aria-hidden=true]) { + background-color: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} +/*progress bar / next button preview border radius*/ +.ytp-tooltip.ytp-bottom, .ytp-tooltip-bg, a.ytp-next-button.ytp-button { + border-radius: 8px !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + background: rgba(50, 50, 50, 0.50); +} +/*(channel) community video box border radius*/ +ytd-video-renderer.style-scope.ytd-backstage-post-renderer { + border-radius: 10px !important; +} +/*(channel) community thread border radius*/ +ytd-backstage-post-thread-renderer[enable-borders-on-community] { + border-radius: 15px !important; +} +/*label background fix*/ +#label.ytd-profile-column-stats-entry-renderer, #poll-votes.ytd-backstage-poll-renderer { + background: transparent !important; +} +/*dropdown menu highlighter border radius*/ +paper-item.style-scope.ytd-menu-service-item-renderer { + border-radius: 10px !important; +} +/*dropdown menu highlighter border radius*/ +paper-item.style-scope.yt-dropdown-menu { + border-radius: 10px !important; +} +/*channel header bg color*/ +#channel-container.ytd-c4-tabbed-header-renderer, #tabs-container.ytd-c4-tabbed-header-renderer { + background-color: rgba(31, 31, 31, 0.4) !important; +} +/*channel header backdrop filter*/ +div#channel-header { + background-color: rgba(31, 31, 31, 0.55) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; +} +/*channel tabs backdrop filter*/ +ytd-c4-tabbed-header-renderer[background-color-update] #channel-container.ytd-c4-tabbed-header-renderer, ytd-c4-tabbed-header-renderer[background-color-update] #tabs-container.ytd-c4-tabbed-header-renderer { + background-color: rgba(23, 23, 23, 0.55) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; +} +/*channel tabs backdrop filter*/ +#tabs-inner-container.ytd-c4-tabbed-header-renderer { + background-color: rgba(40, 40, 40, 0.4) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; +} +/*toggle theme background fix*/ + label.ytd-toggle-theme-compact-link-renderer { + background: transparent !important; +} +/*watch later icon (thumbnail) backdrop filter / border radius*/ +div#label{ + background: rgba(50, 50, 50, 0.60) !important; + /*backdrop-filter: blur(20px) !important;*/ + -webkit-backdrop-filter: blur(20px) !important; + border-radius: 5px !important; +} +/*watch later icon (thumbnail) backdrop filter / border radius*/ +ytd-thumbnail-overlay-toggle-button-renderer.style-scope.ytd-thumbnail { + background: rgba(50, 50, 50, 0.60) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 5px !important; +} +/*merchandise title margin top*/ +div#title { + margin-top: 10px !important; +} +/*merchandise container margin top*/ +td-merch-shelf-renderer[align-with-description][watch-color-update] { + margin-top: 1px !important; +} +/*merchandise container border radius*/ +ytd-merch-shelf-renderer.style-scope.ytd-watch-flexy { + border-radius: 10px !important; + border: none; +} +/*merchandise highlighter*/ +ytd-merch-shelf-item-renderer.style-scope.ytd-merch-shelf-renderer { + border-radius: 8px !important; +} +/*infocard border radius*/ +ytp-cards-teaser-box { + border-radius: 10px !important; +} +/*social media links (channel)*/ +#primary-links.ytd-c4-tabbed-header-renderer, #secondary-links.ytd-c4-tabbed-header-renderer { + border-radius: 10px !important; + margin-right: 10px; +} +/*yt button border radius*/ +ytd-button-renderer.style-destructive[is-paper-button] { + border-radius: 8px !important; +} +/*endscreen video suggestion live margin*/ +span.ytp-videowall-still-info-live { + margin-bottom: 10px !important; + margin-right: 10px !important; +} +/*endscreen video suggestion time margin*/ +span.ytp-videowall-still-info-duration { + margin-bottom: 10px !important; + margin-right: 10px !important; +} +/*endscreen video suggestion author info margin*/ +span.ytp-videowall-still-info-author { + margin-left: 7px !important; +} +/*endscreen video suggestion title margin*/ +span.ytp-videowall-still-info-title { + margin-top: 5px !important; + margin-left: 7px !important; +} +/*endscreen video suggestion margin / border radius*/ +.ytp-videowall-still-image { + margin-top: 7px !important; + margin-bottom: 7px !important; + margin-right: 7px !important; + margin-left: 7px !important; + border-radius: 10px !important; +} +/*thumbnail scale effect*/ +ytd-thumbnail, #thumbnail.ytd-playlist-thumbnail, .ytp-show-tiles .ytp-videowall-still { + transition: all 0.25s !important; +} +/*thumbnail scale effect*/ +ytd-thumbnail:hover, #thumbnail.ytd-playlist-thumbnail:hover, .ytp-show-tiles .ytp-videowall-still:hover { + transform: scale(1.05) +} +/*borderless search icon*/ +#search-icon-legacy.ytd-searchbox { + border: none !important; +} +/*borderless searchbar*/ + #container.ytd-searchbox { + border: none !important; +} +/*dark background*/ + div#columns { + background-color: #191919 !important; +} +/*search icon background color*/ +#search-icon-legacy.ytd-searchbox { + background-color: rgba(101, 100, 100, 0.24) !important; +} +/*searchbar background color*/ + #container.ytd-searchbox { + background-color: #0000003d !important; +} +/*searchhead backdrop filter*/ + #container.ytd-masthead { + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; +} +/*searchhead background color*/ + html:not(.style-scope), :not(.style-scope) { + --yt-spec-brand-background-primary: rgba(51, 51, 51, 0.46) !important; +} +/*yt sub button (subsribed) color*/ + paper-button.ytd-subscribe-button-renderer[subscribed] { + background-color: rgba(255, 255, 255, 0.09) !important; + color: #aaa !important; +} +/*like & dislike animation*/ +@keyframes voting { + 0% { + transform: rotate(-2deg) scale(0.5); + } + 10% { + transform: rotate(-4deg) scale(1.3); + } + 30% { + transform: rotate(-6deg) scale(1.7) + } + 70% { + transform: rotate(3deg) scale(0.6) + } + 100% { + transform: rotate(0deg) scale(1) + } +} +/*like animation time*/ +#info ytd-toggle-button-renderer:nth-of-type(1) .style-default-active yt-icon { + animation: voting 1.1s ease forwards; +} +/*dislike animation time*/ +#info ytd-toggle-button-renderer:nth-of-type(2) .style-default-active yt-icon { + animation: voting 1.1s ease forwards; +} +/*live badge border radius*/ + .badge-style-type-live-now.ytd-badge-supported-renderer { + border-radius: 5px !important; +} +/*channel name border radius fix*/ +#container.ytd-channel-name { + border-radius: 0px !important; +} +/*endscreen channel border radius*/ + .ytp-ce-channel, .ytp-ce-channel .ytp-ce-expanding-image, .ytp-ce-channel .ytp-ce-element-shadow { + border-radius: 17px !important; +} +/*endscreen playlist border radius top left*/ + .ytp-ce-element.ytp-ce-playlist.ytp-ce-element-show.ytp-ce-top-left-quad { + border-radius: 10px !important; +} +/*endscreen playlist border radius top right*/ + .ytp-ce-element.ytp-ce-playlist.ytp-ce-element-show.ytp-ce-top-right-quad { + border-radius: 10px !important; +} +/*endscreen playlist border radius bottom right*/ + .ytp-ce-element.ytp-ce-playlist.ytp-ce-element-show.ytp-ce-bottom-right-quad { + border-radius: 10px !important; +} +/*endscreen playlist border radius bottom left*/ + .ytp-ce-element.ytp-ce-playlist.ytp-ce-element-show.ytp-ce-bottom-left-quad { + border-radius: 10px !important; +} +/*endscreen website border radius top left*/ + .ytp-ce-element.ytp-ce-website.ytp-ce-element-show.ytp-ce-top-left-quad { + border-radius: 17px !important; +} +/*endscreen website border radius top right*/ + .ytp-ce-element.ytp-ce-website.ytp-ce-element-show.ytp-ce-top-right-quad { + border-radius: 17px !important; +} +/*endscreen website border radius bottom left*/ + .ytp-ce-element.ytp-ce-website.ytp-ce-element-show.ytp-ce-bottom-left-quad { + border-radius: 17px !important; +} +/*endscreen website border radius bottom right*/ + .ytp-ce-element.ytp-ce-website.ytp-ce-element-show.ytp-ce-bottom-right-quad { + border-radius: 17px !important; +} +/*endscreen website image border radius*/ + .ytp-ce-expanding-image { + border-radius: 17px !important; +} +/*gaming info container border radius*/ + ytd-rich-metadata-renderer.style-scope.ytd-rich-metadata-row-renderer { + border-radius: 10px !important; +} +/*live chat bottom background color*/ + yt-live-chat-message-input-renderer { + background: rgba(0, 0, 0, 0) !important; +} +/*live chat bar delete*/ + #input-panel.yt-live-chat-renderer::after { + height: 0px !important; +} +/*live chat bar delete*/ + yt-live-chat-renderer { + border-radius: 10px !important; +} +/*channel sub button (in video / bottom right) border radius / backdrop filter / color*/ +.iv-branding .branding-context-container-inner { + border-radius: 10px !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + background: rgba(50, 50, 50, 0.50) !important; +} +/*endscreen title background*/ + .yt-ui-ellipsis { + background-color: #2b2b2b00; +} +/*info card image border radius*/ +.iv-card-image { + border-radius: 10px 10px 0px 0px !important; +} +/*info card background color / border radius*/ + .iv-card { + background: rgba(50, 50, 50, 0.50) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 10px !important; +} +/*info card text color*/ + .iv-card h2 { + color: #d8d8d8; +} +/*info card text color*/ + .ytp-ce-channel-this .ytp-ce-channel-metadata { + margin-top: 0px !important; +} +/*endscreen border top (text / sub button)*/ + .ytp-ce-channel-this .ytp-ce-channel-metadata { + border-top: 1px solid #dc4a4a00; +} +/*endscreen channel info sub button (unsubscribed) border radius*/ + .ytp-sb-subscribe, a.ytp-sb-subscribe { + border-radius: 8px !important; +} +/*endscreen channel info sub button (subscribed) color / border radius / padding*/ + .ytp-sb-unsubscribe { + background-color: #545454; + color: rgba(171, 171, 171, 0.6); + border-radius: 8px !important; + padding: 10px 22px !important; +} +/*endscreen channel margin (header / sub button)*/ + a.ytp-ce-channel-title.ytp-ce-link { + margin-bottom: 5px; +} +/*endscreen channel info text color*/ + .ytp-ce-channel-metadata { + color: #ffffff; +} +/*endscreen channel / website info card color / border radius / backdrop filter*/ + .ytp-ce-expanding-overlay-background { + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + background: rgba(50, 50, 50, 0.50) !important; + border-radius: 10px !important; + box-shadow: none !important; +} +/*endscreen website header color*/ + .ytp-ce-website-title, .ytp-ce-merchandise-title { + color: #fff; +} +/*endscreen video border radius top left*/ + .ytp-ce-element.ytp-ce-video.ytp-ce-element-show.ytp-ce-bottom-left-quad { + border-radius: 10px !important; + } +/*endscreen video border radius top right*/ + .ytp-ce-element.ytp-ce-video.ytp-ce-element-show.ytp-ce-bottom-right-quad { + border-radius: 10px !important; + } +/*endscreen video border radius bottom left*/ + .ytp-ce-element.ytp-ce-video.ytp-ce-element-show.ytp-ce-top-left-quad { + border-radius: 10px !important; +} +/*endscreen video border radius bottom right*/ + .ytp-ce-element.ytp-ce-video.ytp-ce-element-show.ytp-ce-top-right-quad { + border-radius: 10px !important; +} + a#wide-clickable-area { + border-radius: 9px !important; +} +/*live chat / ... header*/ +div#header { + border-radius: 10px 10px 0px 0px !important; +} + ytd-movie-offer-module-renderer.style-scope.ytd-watch-next-secondary-results-renderer { + border-radius: 10px !important; +} +/*ytd button border radius*/ +ytd-button-renderer.style-primary[is-paper-button] { + border-radius: 7px !important; +} +/*show more button yt feed border radius*/ + ytd-button-renderer#show-more-button { + border-radius: 10px; +} +/*show more button yt feed transparent border*/ + #show-more-button.ytd-rich-shelf-renderer { + border-bottom: #f000; +} +/*yt feed transparent border*/ + ytd-rich-shelf-renderer { + border-top: #f000; +} + ytd-post-renderer.style-scope.ytd-rich-item-renderer { + border-radius: 10px !important; +} +/*thumbnail border radius*/ +a#thumbnail { + border-radius: 12px !important; +} +/*thumbnail background border radius*/ +ytd-thumbnail.ytd-rich-grid-video-renderer:before { + border-radius: 12px !important; +} +/*video title border radius fix*/ + #video-title { + border-radius: 0px !important; +} +/*video title border radius fix*/ + a.yt-simple-endpoint.style-scope.yt-formatted-string { + border-radius: 0px !important; +} +/*searchbar predictions highlighter border radius*/ + .gsfs { + border-radius: 7px !important; +} +/*thumbnail border radius*/ + img#img { + border-radius: 10px !important; +} +/*save to (playlist) container backdrop filter*/ + paper-dialog.style-scope.ytd-popup-container { + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + background: rgba(64, 64, 64, 0.40) !important; +} +/*cancel / submit (commetbox) button border radius*/ + #cancel-button.ytd-commentbox, #submit-button.ytd-commentbox { + border-radius: 7px !important; +} +/*scrollbar border radius*/ +.menu-container.ytd-multi-page-menu-renderer::-webkit-scrollbar-thumb { + border-radius: 5px !important; +} +/*theme toggle highlighter border radius*/ +ytd-toggle-theme-compact-link-renderer.style-scope.yt-multi-page-menu-section-renderer { + border-radius: 10px !important; +} +/*channel menu highlighter border radius*/ +ytd-compact-link-renderer.style-scope.yt-multi-page-menu-section-renderer { + border-radius: 10px !important; +} +/*notification menu highlighter border radius*/ +ytd-notification-renderer { + border-radius: 10px !important; +} +/*live chat header border radius*/ +yt-live-chat-header-renderer.style-scope.yt-live-chat-renderer { + border-radius: 10px 10px 0px 0px !important; +} +/*info popup backdrop filter*/ + #tooltip.paper-tooltip { + border-radius: 10px !important; + padding: 4px 8px !important; + margin: 12px 8px !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; +} +/*right click info panel backdrop filter*/ +.ytp-popup, .html5-video-info-panel { + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 10px !important; + background: rgba(50, 50, 50, 0.30) !important; +} +/*searchbar predictions backdrop filter*/ +.sbdd_b, .sbsb_a { + margin-top: 5px !important; + border: 0 !important; + background: rgba(50, 50, 50, 0.3) !important; + border-radius: 10px !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; +} +/*searchbar text*/ +.sbsb_d { + background: rgba(255, 255, 255, 0.1) !important; +} +/*searchbar text bottom right*/ +.sbfl_a, .sbfl_b { + color: rgba(255, 255, 255, 0.5) !important; + background: transparent !important; +} +/*ytd transparent background*/ +#contentContainer.app-drawer[opened], #guide-wrapper.ytd-app { + background: transparent !important; +} +/*sidebar background backdrop filter*/ +#guide-content.ytd-app, ytd-app[background-color-update_] #guide-content.ytd-app, ytd-mini-guide-renderer.ytd-app { + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + background: rgba(35, 35, 35, 0.5) !important; + overflow: hidden !important; +} +/*ytd transparent background*/ +ytd-mini-guide-entry-renderer[background-color-update], ytd-mini-guide-entry-renderer, ytd-menu-popup-renderer, paper-dialog, ytd-sponsorships-offer-renderer[dialog][dialog][dialog], ytd-account-settings, .dropdown-content.paper-menu-button, #embed-panel.yt-sharing-embed-renderer, ytd-report-details-form-renderer[dialog][dialog][dialog], ytd-app[background-color-update_] { + background: transparent !important; +} +/*dropdown menu / notification center / ... backdrop filter*/ +ytd-multi-page-menu-renderer[background-color-update], paper-listbox, yt-confirm-dialog-renderer[dialog][dialog][dialog], paper-toast.yt-notification-action-renderer, paper-dialog, yt-report-form-modal-renderer[dialog][dialog][dialog], ytd-hotkey-dialog-renderer[dialog][dialog][dialog], paper-listbox.yt-dropdown-menu { + border-radius: 10px !important; + background: rgba(50, 50, 50, 0.40) !important; + border: 0 !important; + overflow: hidden !important; +} +/*menu shadow / border radius*/ +ytd-multi-page-menu-renderer[background-color-update], ytd-menu-popup-renderer, #contentWrapper.iron-dropdown > * { + box-shadow: 0px 10px 50px 0px rgba(0,0,0,0.75) !important; + border-radius: 10px !important; +} +/*notification menu video border radius / shadow*/ +.thumbnail-container.ytd-notification-renderer, .thumbnail-container.ytd-comment-video-thumbnail-header-renderer { + border-radius: 10px !important; + box-shadow: 0px 0 20px 0px rgba(0,0,0,0.5) !important; +} +/*channel menu header*/ +ytd-active-account-header-renderer { + background: rgba(50, 50, 50, 0.50) !important; +} +/*share center / ... border radius*/ +paper-dialog, ytd-sponsorships-offer-renderer[dialog][dialog][dialog], ytd-sponsorships-offer-with-video-renderer[dialog][dialog][dialog], .dropdown-content.paper-menu-button { + border-radius: 10px !important; +} +/*menu background transition (closed)*/ +iron-overlay-backdrop { + background-color: rgba(31, 33, 53, 0); + backdrop-filter: blur(0px); + -webkit-backdrop-filter: blur(0px); + opacity: 1; + transition: all .5s; +} +/*menu background transition (opened)*/ +iron-overlay-backdrop.opened, .b3-modal-dialog-quantum.b3-modal-dialog.modal-dialog-bg { + background-color: rgba(50, 50, 50, 0.50); + opacity: 1 !important; + backdrop-filter: blur(30px); + -webkit-backdrop-filter: blur(30px) !important; +} +/*ytd membership background*/ +ytd-sponsorships-offer-with-video-renderer[dialog][dialog][dialog] { + background: rgba(50, 50, 50, 0.50) !important; +} +/*dropdown menu shadow delete*/ +.dropdown-content.paper-menu-button { + box-shadow: 0px 0px 0px 0px !important; +} +/*share center link backdrop filter*/ +#bar.yt-copy-link-renderer { + background: rgba(50, 50, 50, 0.50); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px) !important; + border: 0; + overflow: hidden; + border-radius: 10px !important; +} +/*live chat box hidden*/ +#description-text.ytd-report-details-form-renderer, #card.yt-live-chat-paid-message-renderer { + overflow: hidden; +} +textarea-container fit style-scope iron-autogrow-textarea { + padding: 5px !important; +} +/*playlist shadow*/ +ytd-engagement-panel-section-list-renderer[watch-color-update], ytd-playlist-panel-renderer[watch-color-update_] #container.ytd-playlist-panel-renderer, ytd-live-chat-frame[watch-color-update_] { + border: 0; + overflow: hidden; + box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5); +} +/*socialblade border radius*/ +#socialblade, #socialblade-tab paper-button, #socialblade-tab paper-button { + border-radius: 10px !important; +} +/*socialblade border radius*/ +#sb-heading { + border-radius: 10px 10px 0px 0px !important; +} +/*socialblade border radius*/ +#sb-data-pages { + border-radius: 0px 0px 10px 10px !important; +} +/*live chat header border radius*/ +#yt-live-chat-header-renderer.style-scope.yt-live-chat-renderer { + border-radius: 10px !important; +} +/*live chat hide button border radius*/ + ytd-live-chat-frame[watch-color-update] #show-hide-button.ytd-live-chat-frame > ytd-toggle-button-renderer.ytd-live-chat-frame { + border-radius: 10px !important; +} +/*live chat border radius*/ + ytd-watch-flexy[flexy_][js-panel-height_] #chat.ytd-watch-flexy { + border-radius: 10px !important; +} +/*join button / ... background color / border radius*/ + ytd-button-renderer.style-suggestive[is-paper-button] paper-button.ytd-button-renderer { + border: none !important; + background-color: rgba(0, 149, 255, 0.26) !important; + padding: 10px 14px !important; +} +/*ytd clarification box (public broadcast / ...)*/ + ytd-clarification-renderer { + border-radius: 13px !important; + margin-top: 20px !important; + background-color: #202020 !important; +} +/*comment author title*/ +#author-text.yt-simple-endpoint.ytd-comment-renderer { + margin-right: 16px; + background-color: rgba(183, 183, 183, 0.18); + padding: 2px 10px; +} +/*movie player border radius / shadow*/ + #movie_player, .video-stream, .ytp-small-mode { + border-radius: 13px !important; + box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5); +} +/*playlist highlighter border radius*/ + ytd-playlist-panel-video-renderer#playlist-items { + border-radius: 8px; +} +/*scrollbar border radius*/ + #guide-inner-content.ytd-app::-webkit-scrollbar-thumb { + border-radius: 5px !important; +} +/*scrollbar border radius*/ + .yt-scrollbar-dark.ytd-playlist-panel-renderer::-webkit-scrollbar-thumb { + border-radius: 5px !important; +} +/*container border radius*/ + div#container { + border-radius: 13px !important; +} +/*playlist header border radius*/ + .header.style-scope.ytd-playlist-panel-renderer { + border-radius: 12px 12px 0px 0px !important; +} +/*search icon color*/ + #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox { + color: hsl(0, 0%, 0%) !important; +} +/*button border radius*/ + ytd-button-renderer #button.ytd-button-renderer { + border-radius: 8px !important; +} +/*video (playlist) border radius*/ + ytd-playlist-video-renderer { + border-radius: 10px !important; +} +/*sub button border radius*/ + paper-button.ytd-subscribe-button-renderer { + border-radius: 8px !important; +} +/*searchbox border radius*/ + #search-icon-legacy.ytd-searchbox { + border-radius: 0px 10px 10px 0px !important; +} + #items.yt-horizontal-list-renderer > ytd-post-renderer.yt-horizontal-list-renderer { + border-radius: 10px !important; +} +/*searchbox border radius*/ + #container.ytd-searchbox { + border-radius: 10px 0px 0px 10px !important; +} +/*thumbnail border radius*/ + .yt-simple-endpoint { + border-radius: 8px !important; + } +} diff --git a/userstyles/Apple-Tube_Plus.css b/userstyles/Apple-Tube_Plus.css index 4022351..98c04b3 100644 --- a/userstyles/Apple-Tube_Plus.css +++ b/userstyles/Apple-Tube_Plus.css @@ -1,62 +1,106 @@ /* ==UserStyle== @name Apple-Tube Plus -@namespace lavender software, akira division +@namespace youtube.com @version i forgor +@author lavender software, akira division ==/UserStyle== */ -/*honestly i named this last moment, this is just called "youtube tweakz" in my stylus userstyle manager and will probably stay that way*/ +/*honestly i named this last moment, this is just called "youtube tweakz" in my stylus hehe*/ /*includes edible captions!*/ /*dependency (just one!): apple-tube. in the same folder as this*/ +/* fix broken blur, user account popout */ +/**/ + +/*videoplayer controls*/ +.ytp-left-controls{ + filter: drop-shadow(0px 0px 10px) + drop-shadow(1px 1px 3px #000); +} +.ytp-right-controls{ + filter: drop-shadow(0px 0px 10px) + drop-shadow(1px 1px 3px #000); +} + + + +/*sidebar buttons*/ +.yt-simple-endpoint.style-scope.ytd-guide-entry-renderer{ + box-shadow: inset 0px 10px 25px #fff2, inset 0px -10px 25px #0007, 0px 5px 10px #000; + margin: 5px!important; + width: 220px +} + + /* fix broken blur, user account popout */ .ytd-multi-page-menu-renderer{ - backdrop-filter:blur(50px); + backdrop-filter: blur(5px); border-radius: 10px; - box-shadow: 5px 5px 50px #000a !important; + background: rgba(50, 50, 50, 0.30) !important; + box-shadow: inset 0px 10px 25px #fff2, inset 0px -10px 25px #0007, 0px 5px 10px #000; } .yt-simple-endpoint style-scope ytd-button-renderer{ display:none; } -.ytd-compact-link-renderer:not([has-secondary]) tp-yt-paper-item.ytd-compact-link-renderer { - box-shadow: 5px 5px 40px #000 !important; +.ytd-multi-page-menu-renderer.style-scope.ytd-popup-container { + backdrop-filter: blur(5px); border-radius: 10px; } /* searchbox */ -ytd-searchbox[desktop-search-bar-big-tap-target] #search-form.ytd-searchbox { +#container.ytd-searchbox{ height: 32px; - border-radius: 32px!important; + border-radius: 32px 0px 0px 32px!important; + box-shadow: inset 0px 5px 15px #0007, 0px 5px 5px #fff1; + transition: all ease-out 0.2s; } - -ytd-searchbox[desktop-search-bar-big-tap-target] #search-icon-legacy.ytd-searchbox { - border: 1px solid var(--ytd-searchbox-legacy-button-border-color); - background-color: var(--ytd-searchbox-legacy-button-color); - cursor: pointer; - height: 32px!important; - border-radius: 0px 32px 32px 0px!important; +#container.ytd-searchbox-spt, .sbfcn{ + height: 35px; + border-radius: 32px 4px 4px 32px!important; + box-shadow: inset 0px 5px 15px #fff1, 0px 5px 20px #000, 0px 5px 20px #000; + transition: background-color, box-shadow ease-in 0.2s; } /*searchbox search icon*/ -ytd-searchbox[desktop-search-bar-big-tap-target] #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox { - - width: 24px; - height: 24px; +/*update: is now edible*/ +button#search-icon-legacy.style-scope.ytd-searchbox{ + width: 64px; + height: 35px; color: #fff!important; opacity: 1; + border-radius: 4px 32px 32px 4px!important; + box-shadow: inset 0px 10px 25px #fff2, inset 0px -10px 25px #0007, 0px 5px 10px #000; + background-color:#fff2!important; + transition: all ease-out 0.2s; +} +#search-icon-legacy.style-scope.ytd-searchbox:hover{ + background-color:#fff6!important; + transition: all ease-in 0.2s; +} +#search-icon-legacy.style-scope.ytd-searchbox:active{ + box-shadow: inset 0px 10px 25px #000f; + background-color: #fff1!important; + transition: all ease-in 0.1s; +} + + + +#search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox{ + color: #fff!important; } /*context menus*/ .ytp-popup { - box-shadow: 5px 5px 50px #000 !important; - backdrop-filter: blur(50px) !important; - -webkit-backdrop-filter: blur(10px) !important; +box-shadow: inset 0px -10px 5px #0003, inset 0px 10px 5px #fff3, inset 0px 20px 15px #fff3, inset 0px 4em 10px #fff1, 0px 5px 5px #000a, inset 0px -5px 5px #fff3; + backdrop-filter: blur(5px) !important; + -webkit-backdrop-filter: blur(5px) !important; border-radius: 10px !important; - background: rgba(50, 50, 50, 0.30) !important; + background: rgba(50, 50, 50, 0.70) !important; } .ytp-menuitem { box-shadow:5px 5px 50px #000 !important; @@ -68,8 +112,7 @@ ytd-searchbox[desktop-search-bar-big-tap-target] #search-icon-legacy.ytd-searchb /*video player*/ #movie_player, .video-stream, .ytp-small-mode { - border-radius: 5px !important; - box-shadow: -5px -5px 10px #111111ff, 5px 7px 10px #ffffff15; + border-radius: 4px !important; } @@ -80,8 +123,17 @@ span.ytp-caption-segment{ text-shadow: 0px 0px 5px #0006!important; } .caption-window, .ytp-caption-window-bottom{ - backdrop-filter: blur(10px)!important; + backdrop-filter: blur(50px)!important; border-radius: 5px; background-image: linear-gradient(#1115, #0005)!important; box-shadow: inset 0px -10px 5px #0003, inset 0px 10px 5px #fff3, inset 0px 20px 15px #fff3, inset 0px 4em 10px #fff1, 0px 5px 5px #000a, inset 0px -5px 5px #fff3; } + + + + + +/*rounded square avatars{*/ +.yt-img-shadow#author-photo, #author-photo.yt-live-chat-text-message-renderer, .yt-img-shadow#thumbnail, ytd-comment-renderer:not([comment-style="backstage-comment"])[is-reply], #author-thumbnail.ytd-comment-renderer, yt-img-shadow.ytd-comment-renderer, ytd-comment-renderer[is-creator-reply], #author-thumbnail.ytd-comment-renderer, yt-img-shadow.ytd-comment-renderer, yt-img-shadow.ytd-channel-renderer, yt-img-shadow#avatar, #avatar.ytd-active-account-header-renderer, yt-img-shadow.ytd-mini-channel-renderer, yt-img-shadow.ytd-topbar-menu-button-renderer, yt-img-shadow.ytd-channel-avatar-editor, #avatar.ytd-c4-tabbed-header-renderer, #author-thumbnail.ytd-comment-simplebox-renderer, #author-thumbnail.ytd-comment-renderer yt-img-shadow.ytd-comment-renderer, #author-thumbnail.ytd-comment-renderer, yt-img-shadow.ytd-comment-renderer, #avatar.ytd-video-owner-renderer, yt-img-shadow.style-scope.ytd-guide-entry-renderer.no-transition, yt-img-shadow.style-scope.ytd-guide-entry-renderer.no-transition, yt-img-shadow.style-scope.ytd-grid-channel-renderer.no-transition, ytd-comment-renderer:not([comment-style=backstage-comment])[is-reply], #author-thumbnail.ytd-comment-renderer, yt-img-shadow.ytd-comment-renderer, ytd-comment-renderer[is-creator-reply], #author-thumbnail.ytd-comment-renderer, yt-img-shadow.ytd-comment-renderer, .ytp-flyout-cta, .ytp-flyout-cta-icon, a.ytp-title-channel-logo { + border-radius: 10% !important; +} diff --git a/userstyles/Apple-Tube_Plus.css~ b/userstyles/Apple-Tube_Plus.css~ new file mode 100644 index 0000000..4022351 --- /dev/null +++ b/userstyles/Apple-Tube_Plus.css~ @@ -0,0 +1,87 @@ +/* ==UserStyle== +@name Apple-Tube Plus +@namespace lavender software, akira division +@version i forgor +==/UserStyle== */ + + +/*honestly i named this last moment, this is just called "youtube tweakz" in my stylus userstyle manager and will probably stay that way*/ +/*includes edible captions!*/ +/*dependency (just one!): apple-tube. in the same folder as this*/ +/* fix broken blur, user account popout */ + +.ytd-multi-page-menu-renderer{ + backdrop-filter:blur(50px); + border-radius: 10px; + box-shadow: 5px 5px 50px #000a !important; +} +.yt-simple-endpoint style-scope ytd-button-renderer{ + display:none; +} +.ytd-compact-link-renderer:not([has-secondary]) tp-yt-paper-item.ytd-compact-link-renderer { + box-shadow: 5px 5px 40px #000 !important; + border-radius: 10px; +} + + +/* searchbox */ + +ytd-searchbox[desktop-search-bar-big-tap-target] #search-form.ytd-searchbox { + height: 32px; + border-radius: 32px!important; +} + +ytd-searchbox[desktop-search-bar-big-tap-target] #search-icon-legacy.ytd-searchbox { + border: 1px solid var(--ytd-searchbox-legacy-button-border-color); + background-color: var(--ytd-searchbox-legacy-button-color); + cursor: pointer; + height: 32px!important; + border-radius: 0px 32px 32px 0px!important; +} + +/*searchbox search icon*/ +ytd-searchbox[desktop-search-bar-big-tap-target] #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox { + + width: 24px; + height: 24px; + color: #fff!important; + opacity: 1; +} + + +/*context menus*/ + +.ytp-popup { + box-shadow: 5px 5px 50px #000 !important; + backdrop-filter: blur(50px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 10px !important; + background: rgba(50, 50, 50, 0.30) !important; +} +.ytp-menuitem { + box-shadow:5px 5px 50px #000 !important; + border-radius: 5px!important; +} + + + +/*video player*/ +#movie_player, .video-stream, .ytp-small-mode { + + border-radius: 5px !important; + box-shadow: -5px -5px 10px #111111ff, 5px 7px 10px #ffffff15; +} + + +/*captions*/ +span.ytp-caption-segment{ + color: #ffff; + background: #0000!important; + text-shadow: 0px 0px 5px #0006!important; +} +.caption-window, .ytp-caption-window-bottom{ + backdrop-filter: blur(10px)!important; + border-radius: 5px; + background-image: linear-gradient(#1115, #0005)!important; + box-shadow: inset 0px -10px 5px #0003, inset 0px 10px 5px #fff3, inset 0px 20px 15px #fff3, inset 0px 4em 10px #fff1, 0px 5px 5px #000a, inset 0px -5px 5px #fff3; +} diff --git a/userstyles/Tootmorphism.css b/userstyles/Tootmorphism.css index c976c9e..7cb90cf 100644 --- a/userstyles/Tootmorphism.css +++ b/userstyles/Tootmorphism.css @@ -1,94 +1,94 @@ /* ==UserStyle== @name Tootmorphism -@namespace lavender software, akira division +@namespace put ur mastodon place here @version i forgor +@author lavender software, akira division ==/UserStyle== */ /* * cabby cabbage */ -/* -this is very rude of me i should've commented this code +/* this is very rude of me i should've commented this code umm. sorry!!!! it's not even organized,,, -i guess because i never expected anyone Else to look at it -my apology and regard (one), akiras -*/ +i guess because i never expected anyone Else to look at it*/ /* -dependency (yeah! just one): Witches Town. i should do an overhaul of this to work with actual mastodon colors -please use the Witches_Town_Compiled.css file if you're adding this to your userstyle agent. -if you'd like to contribute to something, please file a pull request. i promise to look over those and consider them carefully. -thank you. -*/ - .app-body.layout-single-column{ background: #27222f!important; } +*/ - +/*hides filtered status*/ .status__wrapper--filtered { - display: none!important;; - } - -.notification, .status__wrapper, .detailed-status, .detailed-status__action-bar { - box-shadow: inset 0 -50px 100px #17131d, 0px 0px 10px #000, inset 0px -3px 0px #000f, inset 0px 2px 0px #625776!important; - border-radius: 10px!important; - margin: 5px!important; - background: #383144!important; + display: none!important; } +/*toot bg, including notifications, expanded statuses, and the TL*/ + .notification, .status__wrapper, .detailed-status, .detailed-status__action-bar { + box-shadow: inset 0 -50px 100px #17131d, 0px 0px 10px #000, inset 0px -3px 0px #000f, inset 0px 2px 0px #625776!important; + border-radius: 10px!important; + margin: 5px!important; + background: #383144!important; + transition: all 0.2s!important; + } +/*toot hover*/ + .notification:hover, .status__wrapper:hover, .detailed-status:hover, .detailed-status__action-bar:hover { + box-shadow: inset 0 -50px 100px #17131d, 0px 0px 10px #000, inset 0px -3px 0px #000f, inset 0px 2px 0px #625776!important; + border-radius: 10px!important; + margin: 5px!important; + background: #4b435a!important; +} +/*removes that 1px line between statuses*/ .status{ border-bottom: none!important; } - +/* do not know what this does .column > .scrollable { background: #1e1a24!important; } +*/ +/* drag 'n drop upload screeny. i think. */ .modal-root__overlay{ backdrop-filter: blur(5px)!important; transition: all .5s!important; } - +/*big shadow from the main column for aesthetic purposes*/ .columns-area__panels__main{ box-shadow: 0px 0px 150px #0e0c11!important; padding: 0px!important; margin-left: 30px!important; margin-right: 30px!important; } - +/*when someone posts there's this "$name just posted" thingy. but with this uuserstyle that message is too close to the actual toot. this fixes that*/ .columns-area--mobile .notification__message { padding-bottom: 10px!important; } +/*toot button ('block')*/ .button.button--block { background: linear-gradient(#a288bd, #5f526c 90%, #a288bd)!important; box-shadow: 0px 0px 5px #000f, 0px 0px 5px #000f, inset 0px 3px 3px #ddd5e6aa, inset 0px -3px 3px #807591!important; - transition: all 0.2s!important; + text-shadow: 2px 2px 10px #4e415b; margin-left: 0px!important; margin-bottom: 13px!important; -} -.button.button--block:hover { - background: - linear-gradient(45deg, #0000 65%, #fff3 80%, #fff3 100%, #0000 100%), - linear-gradient(45deg, #0000 15%, #fff3 35%, #fff3 35%, #0000 37%), - linear-gradient(#a288bd, #42374d)!important; transition: all 0.2s!important; } - +/*toot button - hover*/ +.button.button--block:hover { + box-shadow: 0px 0px 5px #000f, 0px 0px 5px #000f, inset 0px 50px 50px #fff5, inset 0px 3px 3px #ddd5e6aa, inset 0px -3px 3px #807591!important; + text-shadow: 2px 2px 10px #4e415b, 2px 2px 10px #4e415b, 2px 2px 20px #4e415b; + transition: all 0.2s!important; +} +/*toot button - clicky*/ .button.button--block:active { - box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6)!important; - transition: all 0.2s!important; + box-shadow: inset 0 0 50px #000, 0 0 5px #000!important; + transition: all 0.2s!important; } .autosuggest-textarea__textarea { background-color: #fff0!important; } -.search__input{ - border-radius: 10px!important; - box-shadow: inset 0px 3px 5px #0e0b11, 0px 1px 2px #ddd5e622!important; - background: linear-gradient(#16121b, #27232c)!important; -} .compose-form__uploads-wrapper:empty { display: none !important; @@ -104,9 +104,16 @@ thank you. box-shadow: inset 0px -3px 10px #807591!important; } +/*write box*/ .compose-form__autosuggest-wrapper{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAONElEQVR4nG3aWZLkOA4EUN3/tNp3CfMR9liemk6zsK6OlEgQcDgcYHZ939d5ntX3ffV9X/u+1zRNVVV133e971vLstR1XVVVNQxDbdtW27a175ZlqXVda9u2Os+ztm2rqqrrumpZlpqmqYZhqOu6al3Xet+3hmGocRxrnufq+749N01TzfPcvr+uq+Z5rqqq8zzbmp4ZhqGqqtZ1rfM8633fuq6rhmFov7/vu9Z1rX3f63meWpaljuOoYRiqG4ahlmWpbdvqOI46jqOmaar7vuu6rtq2rZ7nqWEYmoOGYaj3fduG67rWMAxt0XEc6ziOmue5zvOsaZpqWZY6z7PWda11Xeu+7xrHsTlwnufatq3u+65lWarv+7bWOI71vm/t+96CdRxHPc9T67rWsizN3uu62jPWZJ8zLsvSnNHN81zHcdR1XW3T8zyrqlrk9n1vyNj3vaGi7/vatq2GYajneWqe53bY+76bERBy33dxOGfP89yQcZ5nPc9T+77Xfd8t6sdxtL28t65rjeNY53m2987zrHEc2xoOfxxHQ7R/7/teVVXdsiwNQvd9177vzTCG86BDgSEvMlDErutqcLZ2VTV4OtS+7+3553maY/2Oscuy1LIsDb7S5fsuRAiq7yCVU9/3rfd9fw4Aa1HzUFW1iK7r+udQDs1geb+u6590cRiHHsextm1rkN62rfq+b+u/71t931dVtcPN89y+n+e5RZfd53k2juIMwZQmz/PUOI5/EMBR3bIsNQxDixZnZP4gJA4Yx7EZjsie56lpmpqjrutq5GN9jsu8ZdA8z/8HWx9pM45jI1MI8ZHCVfUnRZB7EiaCrKrqeD4PD/rHcfwhFM+CPGaVh1LEIdZ1rWma2hqijxw5J1MqSXnbtsY99peC0k9VeZ6nccw0TfW+b43jWNM0NSL3PCRO01QdiPd93/IFAeIBMAdvFYCBjMlDJtkgKwfdtq3meW4IkS4cxRG5Pns8wwm4R+mTBoLhPIjVulKrEwleSjIZx7FFUtQZbgPGMOi+76YH+r5vzhD5eZ5bjm7b1g4uFXPt8zxb5JXDqmrVQCT3fW98pURifbBP8paCx3FUpx4nbK/r+kNyclSdTmj9V37f913nedYwDK1E2vw8z9r3/Y8wEQ2GWcvhcY8SXFXtvbQJGQoeDuAg51QVhmGoDolkDWYw9pYvSEiqYP2s0wQRvvhqAlFS3p7naVHkuPu+G6l6D4mlssuIEkp937eqoVyyLUs34m5CyMu5YSqyjBD44Q1Rlz6I777vto5KYm1OFh0oy1rNSfKanfQAolTuILDv+1ZhEDGUqTac1vHgvu8t6mom2KQie56nlRqwk5fUlfTIA0zT9Ef9JTOnqmSkvThSWeX0LHUpudnqx/5f8nbWTi54CSHxrJxhOKjpGTiIxkZe0mUcx8biuEM5kx5qsxLokCKf4ioJF3qghWaBRkjwPP4R7PM8q3OA7KASAUpKEh921ScgPL1DdpjDMDS4kcQpYrL0pmDhOOuwIzs5NnsOOSpzKbkhncqUln+UoEMm04J3VotsebNOY17kw4nfUksKp6KDBs5UQsHWgUFf5LMaQSdb8Bp7rU/7DMPwK4MixCtq8dcZFksCc9Aso2SzNEFEKZCQIxLlbIRKk3AELvBd9iFpa2oHNtlPFfK7931/UphXHNKmHuZprWbOADhBbmbLqtnBB/JbaQJhCFA+BUR0qUhaAGpTIMl3Ha3DejdTURl+37c6pS3Z0S85Jp1gU7lqY+9k26lM5UQp8zeFEzT4qCYpYhzk2w6nAxAdsSNNVQRpyLldsm/CkgEpLNTrhBAD5DKhRFTJTQImx1R0g4NwXPYHBE/2+VSqKgGtqpk0QMJsTVL16ZZlaZFLHhDBZHv5LgL69WR83yldjPQ8PsANOa/jBJIXX0BijuUyp3ENNQkNgoEMpXlWvC4JCx+AfEZIUyFdtJs5SgP/7AEoL5t+iVCEsp22X5ZH+kRwrJPtrqj7N9uyQxVwz3UO4ofCU4JSj4OlNEgyQ4qUHZ2eoiV7d3thb2kibRItqfIgLBufHHTId+lC/0Ov9FGxOlDIcZYcNrbKRZFdHoqHk6VtrKRxWDYtRAvC9d5Xfao+DpV1nTZJciSwUv0p5Zlafd//miERz5rKONEyASItOSyVoCg4RM4AMjWQVAoXacQx/h+xesaeuAdvcI70cBbPGqnhOf1Eh41BUoORjQ/VxwGQkLrf4vIcgzPyO7nJafR/wZZmyEmxZ/NdQ5uEtb0QtlTyO1Vrnud/CEihknUf3EAuLxfkLsXlHamRFy05WMU78lglkJ9gmvVeL+DeQcCyOUoJbhQHmYIg4CpXJy+wcY7A5HfCFHTkrPoMJan9KbZkfYSW128aopwcZSmEOqX0K6iyyYIaAcuAJhKhogNRis2BkFZOc7Kbyj4h5/zJEdmyKp05Qs98J505ROQ8mzMD5JpXct/ZhEDmIMReeGkcx+pA+jt4/M7Zss7mJEetTrGUOYtIkaDvGOqTAxN5jWBpEc6wXzpEdaJFlGxO9U6e7bqu6kQJOTA4hxsY3XfpsBQoOeryyZlCXpQSMPr1HK9/f75TZE74NkIOmASdg1OI9f15nj8EgEhOUWllkchxEzJKaYngcqyNyDyT/T0UkLjg7IMcswOlDxzcoaUDyNsvS3r2BCmuOjnBMFDKaTBHkK5ZiuQVdKj5SmUyNs+nYpMKBJgymooSL/geEStt6jyHSWOqMidcSFWr3oEmiSp/01MpdBAhmCmfDOHZ7z0//iB+UlPk9AdUHTorgP9CI8f6EflsoqDbDCAbsXEcf/MAMMyGJ2Vo9u3pnO8tTHaRcjlTIoeXEJAwlwbZgiunmb8qENtzsk1jJIEi2m/D9L7vjwRzrpZ/cODAZGRKT0aLHiQhKfBNQ6WWrjNrMuZng7VTu2eJFahsyZNYOUywHJ4z8UdnkJGT17zWEn0yUhmTHlJH24tI8UpyQN7lQUaqzLxgFUHIs3eij81IM0UbGwXM/jkfOI7j3+VoqreM4jeqPCxyoMzrqoguLFtixIS1GSSKORPMuQBhliOtnDYRPvbBRwjX7/JOQq/TKSvZMORlCXjJqyxlDkoH5GjKoczoc0ihhueQhONzkIKU84JWaZM+OeXNDhWCOVpVy3J6HMevF+At+c9jck4U8iKUs/JeMf8mAJllRyfykIWQchINNTkJTqelQKv6p+5yJsAGyEWEuCdLd8cwvyQbGSCymVN5JWZjXlVmRN/6qoI9PA9xOZ5XQnNUnmLN+4gVElLRqirWESxkKtid3JQbIJ3wzNzNvMom53sb5PAiIl+9D7Yiy3Cl1AFAP+f+eIhdGqlsnLK151Cpnm1xuxfI2RwyEe0sQQ6X/YE04gjvfq+1IADrqzBZ2rL6QAjVB51+RN56WWpB3KFJ8bxmv67rdzmawoNQUX5S3yOlrLHKFmLKNMpeIa/GcpCSnAJt9snrMoejQeS7NXM+yAmZAoQdh0Fix1OgBNIihPwyd3Lml9fPIK6r87y1QNTvRCZHchySwxfVJiOM5OxrPYgD9RyIZuWRfu2vxMA0xY2m5cvuqkKWP7CVb3k9nU2Mj0ggKF1d9hccav+cSzhUjt+h2ffSJKfUOTBdluXXDudQEly+199eAGFGcAZHJrtzHnhiXkSWd4T2FtlsjjJyeRPNSelM6DBmy9E8gswxYOfgqgDDQTk1QOr+bHdTzYmMA3ESh4Kqumx9IgqBSYlUo2lHjsQy2lXVOC2v/b8iDmI7D3/1c14eZPTTeJ0X0st7wLzglJPWzHkA9YZTHD6dKPdFMBGVqZtjsy+XIFlo4pQue3MwyptUpctC6T3GKo0WTkPy3i9H25Rjlj97cHKyP+MzReyf8OdQ6jZvsFIRclznMDm/RyiYO3OcLsg7A32DaOWQJKdEnJZT2ZxCMZBDlEXRZUcqxGzbTa5zDAbyed2XLXrH0/IjD/u9ALUJaOUfUIiKiMhXRnCkvE2BlbO7vCQViFSYeU+gYrF/3//9tbkKJFB4KCvGcRy/P5FR2jwAJjliyhsaNTVzmLTN67VsX3GET06AkiAJJBJWiiVBZr/gd5nnfpdX/Dl6kzr3ff+ksGj7ko4WER7PJkTUkZwD5uVJ3jUYQubgQplSQXLWx8GQlhc1BJaKlQqUM1OB5qVq/k3Bvu+/u8EsHQm7HIXl2Cvv6DO/s94yUCp8xYm85HyVwnf4J2+iHTTtzMsV5O096HJGwc6bpg4B5W1K6mf1VqQY8UWHqGFXxpkegXXO574XGlQjrsj2F3pULKmZLTC78wosSzSpn3ca3X3ff0pFzt2wvbqqBufliAOrAFhdRdElElmM8I7D5K2PUuddc76s7d8/q8lRXJZxnJHByGv8DkkwMi8p5TOn5G0PpzkMBOTMjvPygEgy/6CCszjAO4z8MjhJzAEQav0c0KQmcB56ZhzHnw4wegYTsKQJGA0Vycqp1zkze34dnTLl3yBYVX+IEJzVf8Rn3TyU92gBqPpKYsRtNpCir1PSkpExZOpmrG6zvOD0X3183jfiGGKLs9JAjU1euDp4TnXY9xVH7M2GJ8fq7JGuOs5xHH8kmMJEZKQFkpGPxI0oyzPwr6pWg9P4bHHtSeLiBgRLcHEAOawq5VTKcDWluOAJbt5viLw0bWPxZNIceaUxEJD55lAcw3kpgkQ6RYuDca7nIST5hczO2QRStK6K4T22Z8nOewiltAOdVGMmPHlV7nBJRPnHB2Cdg1BlT6PCUSluQBJicmzF4TTCV/n5fyUURyA8QfKRPlkmO0zK2ByEmJtlswH6qReSxXOeQIGBoRJJ5MhZDk094v3sKxwwxRkHJYLoBUHJm21BEPT/AYTDWuBdlB9yAAAAAElFTkSuQmCC)!important; - background-color: #fff!important; + box-shadow: inset 0px 0px 40px #ddd5e6!important; + padding-bottom: 10px; + transition: all .2s; +} +.compose-form__autosuggest-wrapper:focus-within{ + box-shadow: inset 0px 0px 20px 0px#ddd5e6!important; + padding-bottom: 10px; + transition: all .2s; } @@ -121,12 +128,34 @@ ul.attachment-list__list li a i.fa.fa-link, ul.attachment-list__list, .attachmen color:#807591!important; } +/*thanks to neumorphism.io css gen*/ +.text-icon-button, .privacy-dropdown, .compose-form__poll-button, .compose-form__upload-button{ + box-shadow: 3px 3px 6px #bebebe, + -3px -3px 6px #ffffff; + border-radius: 4px; + margin-right: 4px; +} +.text-icon-button:hover, .privacy-dropdown:hover, .compose-form__poll-button:hover, .compose-form__upload-button:hover{ + box-shadow: 0px 0px 0px, inset 0px 0px 50px #ffffff!important; + transition: all 0.2s !important; + border-radius: 4px; + margin-right: 4px; +} + + .search { border-radius: 4px!important; margin-left: 10px!important; margin-right: 10px!important; } +.search__input{ + border-radius: 5px!important; + box-shadow: inset 0px 3px 5px #0e0b11, 0px 1px 2px #ddd5e622!important; + background: linear-gradient(#16121b, #27232c)!important; + transition: all 0.2s!important; +} + .column-header, .column-header__button { background: linear-gradient(0deg, #2a253155, #423a5022)!important; @@ -168,7 +197,7 @@ ul.attachment-list__list li a i.fa.fa-link, ul.attachment-list__list, .attachmen background: linear-gradient(180deg, #27222f, #1d1a22)!important; border-radius: 5px!important; margin: 2px!important; - box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3)!important; + box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.9)!important; } .column-link.active, .column-link.active:hover, diff --git a/userstyles/Tootmorphism.css~ b/userstyles/Tootmorphism.css~ new file mode 100644 index 0000000..c976c9e --- /dev/null +++ b/userstyles/Tootmorphism.css~ @@ -0,0 +1,224 @@ +/* ==UserStyle== +@name Tootmorphism +@namespace lavender software, akira division +@version i forgor +==/UserStyle== */ + /* + * cabby cabbage +*/ + +/* +this is very rude of me i should've commented this code +umm. sorry!!!! it's not even organized,,, +i guess because i never expected anyone Else to look at it +my apology and regard (one), akiras +*/ + +/* +dependency (yeah! just one): Witches Town. i should do an overhaul of this to work with actual mastodon colors +please use the Witches_Town_Compiled.css file if you're adding this to your userstyle agent. +if you'd like to contribute to something, please file a pull request. i promise to look over those and consider them carefully. +thank you. +*/ + +.app-body.layout-single-column{ + background: #27222f!important; +} + + +.status__wrapper--filtered { + display: none!important;; + } + +.notification, .status__wrapper, .detailed-status, .detailed-status__action-bar { + box-shadow: inset 0 -50px 100px #17131d, 0px 0px 10px #000, inset 0px -3px 0px #000f, inset 0px 2px 0px #625776!important; + border-radius: 10px!important; + margin: 5px!important; + background: #383144!important; +} +.status{ + border-bottom: none!important; +} + +.column > .scrollable { + background: #1e1a24!important; +} + +.modal-root__overlay{ + backdrop-filter: blur(5px)!important; + transition: all .5s!important; +} + + +.columns-area__panels__main{ + box-shadow: 0px 0px 150px #0e0c11!important; + padding: 0px!important; + margin-left: 30px!important; + margin-right: 30px!important; +} + +.columns-area--mobile .notification__message { + padding-bottom: 10px!important; +} + +.button.button--block { + background: linear-gradient(#a288bd, #5f526c 90%, #a288bd)!important; + box-shadow: 0px 0px 5px #000f, 0px 0px 5px #000f, inset 0px 3px 3px #ddd5e6aa, inset 0px -3px 3px #807591!important; + transition: all 0.2s!important; + margin-left: 0px!important; + margin-bottom: 13px!important; +} +.button.button--block:hover { + background: + linear-gradient(45deg, #0000 65%, #fff3 80%, #fff3 100%, #0000 100%), + linear-gradient(45deg, #0000 15%, #fff3 35%, #fff3 35%, #0000 37%), + linear-gradient(#a288bd, #42374d)!important; + transition: all 0.2s!important; +} + +.button.button--block:active { + box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6)!important; + transition: all 0.2s!important; +} + +.autosuggest-textarea__textarea { + background-color: #fff0!important; +} +.search__input{ + border-radius: 10px!important; + box-shadow: inset 0px 3px 5px #0e0b11, 0px 1px 2px #ddd5e622!important; + background: linear-gradient(#16121b, #27232c)!important; +} + +.compose-form__uploads-wrapper:empty { + display: none !important; + background: linear-gradient(0deg, #a99cb7, #ddd5e6)!important; +} + +.compose-form .compose-form__buttons-wrapper { + background: linear-gradient(0deg, #ddd5e6, #f9f9f9) !important; + box-shadow: 0px 0px 5px #000; +} +.reply-indicator{ + background: linear-gradient(0deg, #a99cb7, #ddd5e6, #f9f9f9) !important; + box-shadow: inset 0px -3px 10px #807591!important; +} + +.compose-form__autosuggest-wrapper{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAONElEQVR4nG3aWZLkOA4EUN3/tNp3CfMR9liemk6zsK6OlEgQcDgcYHZ939d5ntX3ffV9X/u+1zRNVVV133e971vLstR1XVVVNQxDbdtW27a175ZlqXVda9u2Os+ztm2rqqrrumpZlpqmqYZhqOu6al3Xet+3hmGocRxrnufq+749N01TzfPcvr+uq+Z5rqqq8zzbmp4ZhqGqqtZ1rfM8633fuq6rhmFov7/vu9Z1rX3f63meWpaljuOoYRiqG4ahlmWpbdvqOI46jqOmaar7vuu6rtq2rZ7nqWEYmoOGYaj3fduG67rWMAxt0XEc6ziOmue5zvOsaZpqWZY6z7PWda11Xeu+7xrHsTlwnufatq3u+65lWarv+7bWOI71vm/t+96CdRxHPc9T67rWsizN3uu62jPWZJ8zLsvSnNHN81zHcdR1XW3T8zyrqlrk9n1vyNj3vaGi7/vatq2GYajneWqe53bY+76bERBy33dxOGfP89yQcZ5nPc9T+77Xfd8t6sdxtL28t65rjeNY53m2987zrHEc2xoOfxxHQ7R/7/teVVXdsiwNQvd9177vzTCG86BDgSEvMlDErutqcLZ2VTV4OtS+7+3553maY/2Oscuy1LIsDb7S5fsuRAiq7yCVU9/3rfd9fw4Aa1HzUFW1iK7r+udQDs1geb+u6590cRiHHsextm1rkN62rfq+b+u/71t931dVtcPN89y+n+e5RZfd53k2juIMwZQmz/PUOI5/EMBR3bIsNQxDixZnZP4gJA4Yx7EZjsie56lpmpqjrutq5GN9jsu8ZdA8z/8HWx9pM45jI1MI8ZHCVfUnRZB7EiaCrKrqeD4PD/rHcfwhFM+CPGaVh1LEIdZ1rWma2hqijxw5J1MqSXnbtsY99peC0k9VeZ6nccw0TfW+b43jWNM0NSL3PCRO01QdiPd93/IFAeIBMAdvFYCBjMlDJtkgKwfdtq3meW4IkS4cxRG5Pns8wwm4R+mTBoLhPIjVulKrEwleSjIZx7FFUtQZbgPGMOi+76YH+r5vzhD5eZ5bjm7b1g4uFXPt8zxb5JXDqmrVQCT3fW98pURifbBP8paCx3FUpx4nbK/r+kNyclSdTmj9V37f913nedYwDK1E2vw8z9r3/Y8wEQ2GWcvhcY8SXFXtvbQJGQoeDuAg51QVhmGoDolkDWYw9pYvSEiqYP2s0wQRvvhqAlFS3p7naVHkuPu+G6l6D4mlssuIEkp937eqoVyyLUs34m5CyMu5YSqyjBD44Q1Rlz6I777vto5KYm1OFh0oy1rNSfKanfQAolTuILDv+1ZhEDGUqTac1vHgvu8t6mom2KQie56nlRqwk5fUlfTIA0zT9Ef9JTOnqmSkvThSWeX0LHUpudnqx/5f8nbWTi54CSHxrJxhOKjpGTiIxkZe0mUcx8biuEM5kx5qsxLokCKf4ioJF3qghWaBRkjwPP4R7PM8q3OA7KASAUpKEh921ScgPL1DdpjDMDS4kcQpYrL0pmDhOOuwIzs5NnsOOSpzKbkhncqUln+UoEMm04J3VotsebNOY17kw4nfUksKp6KDBs5UQsHWgUFf5LMaQSdb8Bp7rU/7DMPwK4MixCtq8dcZFksCc9Aso2SzNEFEKZCQIxLlbIRKk3AELvBd9iFpa2oHNtlPFfK7931/UphXHNKmHuZprWbOADhBbmbLqtnBB/JbaQJhCFA+BUR0qUhaAGpTIMl3Ha3DejdTURl+37c6pS3Z0S85Jp1gU7lqY+9k26lM5UQp8zeFEzT4qCYpYhzk2w6nAxAdsSNNVQRpyLldsm/CkgEpLNTrhBAD5DKhRFTJTQImx1R0g4NwXPYHBE/2+VSqKgGtqpk0QMJsTVL16ZZlaZFLHhDBZHv5LgL69WR83yldjPQ8PsANOa/jBJIXX0BijuUyp3ENNQkNgoEMpXlWvC4JCx+AfEZIUyFdtJs5SgP/7AEoL5t+iVCEsp22X5ZH+kRwrJPtrqj7N9uyQxVwz3UO4ofCU4JSj4OlNEgyQ4qUHZ2eoiV7d3thb2kibRItqfIgLBufHHTId+lC/0Ov9FGxOlDIcZYcNrbKRZFdHoqHk6VtrKRxWDYtRAvC9d5Xfao+DpV1nTZJciSwUv0p5Zlafd//miERz5rKONEyASItOSyVoCg4RM4AMjWQVAoXacQx/h+xesaeuAdvcI70cBbPGqnhOf1Eh41BUoORjQ/VxwGQkLrf4vIcgzPyO7nJafR/wZZmyEmxZ/NdQ5uEtb0QtlTyO1Vrnud/CEihknUf3EAuLxfkLsXlHamRFy05WMU78lglkJ9gmvVeL+DeQcCyOUoJbhQHmYIg4CpXJy+wcY7A5HfCFHTkrPoMJan9KbZkfYSW128aopwcZSmEOqX0K6iyyYIaAcuAJhKhogNRis2BkFZOc7Kbyj4h5/zJEdmyKp05Qs98J505ROQ8mzMD5JpXct/ZhEDmIMReeGkcx+pA+jt4/M7Zss7mJEetTrGUOYtIkaDvGOqTAxN5jWBpEc6wXzpEdaJFlGxO9U6e7bqu6kQJOTA4hxsY3XfpsBQoOeryyZlCXpQSMPr1HK9/f75TZE74NkIOmASdg1OI9f15nj8EgEhOUWllkchxEzJKaYngcqyNyDyT/T0UkLjg7IMcswOlDxzcoaUDyNsvS3r2BCmuOjnBMFDKaTBHkK5ZiuQVdKj5SmUyNs+nYpMKBJgymooSL/geEStt6jyHSWOqMidcSFWr3oEmiSp/01MpdBAhmCmfDOHZ7z0//iB+UlPk9AdUHTorgP9CI8f6EflsoqDbDCAbsXEcf/MAMMyGJ2Vo9u3pnO8tTHaRcjlTIoeXEJAwlwbZgiunmb8qENtzsk1jJIEi2m/D9L7vjwRzrpZ/cODAZGRKT0aLHiQhKfBNQ6WWrjNrMuZng7VTu2eJFahsyZNYOUywHJ4z8UdnkJGT17zWEn0yUhmTHlJH24tI8UpyQN7lQUaqzLxgFUHIs3eij81IM0UbGwXM/jkfOI7j3+VoqreM4jeqPCxyoMzrqoguLFtixIS1GSSKORPMuQBhliOtnDYRPvbBRwjX7/JOQq/TKSvZMORlCXjJqyxlDkoH5GjKoczoc0ihhueQhONzkIKU84JWaZM+OeXNDhWCOVpVy3J6HMevF+At+c9jck4U8iKUs/JeMf8mAJllRyfykIWQchINNTkJTqelQKv6p+5yJsAGyEWEuCdLd8cwvyQbGSCymVN5JWZjXlVmRN/6qoI9PA9xOZ5XQnNUnmLN+4gVElLRqirWESxkKtid3JQbIJ3wzNzNvMom53sb5PAiIl+9D7Yiy3Cl1AFAP+f+eIhdGqlsnLK151Cpnm1xuxfI2RwyEe0sQQ6X/YE04gjvfq+1IADrqzBZ2rL6QAjVB51+RN56WWpB3KFJ8bxmv67rdzmawoNQUX5S3yOlrLHKFmLKNMpeIa/GcpCSnAJt9snrMoejQeS7NXM+yAmZAoQdh0Fix1OgBNIihPwyd3Lml9fPIK6r87y1QNTvRCZHchySwxfVJiOM5OxrPYgD9RyIZuWRfu2vxMA0xY2m5cvuqkKWP7CVb3k9nU2Mj0ggKF1d9hccav+cSzhUjt+h2ffSJKfUOTBdluXXDudQEly+199eAGFGcAZHJrtzHnhiXkSWd4T2FtlsjjJyeRPNSelM6DBmy9E8gswxYOfgqgDDQTk1QOr+bHdTzYmMA3ESh4Kqumx9IgqBSYlUo2lHjsQy2lXVOC2v/b8iDmI7D3/1c14eZPTTeJ0X0st7wLzglJPWzHkA9YZTHD6dKPdFMBGVqZtjsy+XIFlo4pQue3MwyptUpctC6T3GKo0WTkPy3i9H25Rjlj97cHKyP+MzReyf8OdQ6jZvsFIRclznMDm/RyiYO3OcLsg7A32DaOWQJKdEnJZT2ZxCMZBDlEXRZUcqxGzbTa5zDAbyed2XLXrH0/IjD/u9ALUJaOUfUIiKiMhXRnCkvE2BlbO7vCQViFSYeU+gYrF/3//9tbkKJFB4KCvGcRy/P5FR2jwAJjliyhsaNTVzmLTN67VsX3GET06AkiAJJBJWiiVBZr/gd5nnfpdX/Dl6kzr3ff+ksGj7ko4WER7PJkTUkZwD5uVJ3jUYQubgQplSQXLWx8GQlhc1BJaKlQqUM1OB5qVq/k3Bvu+/u8EsHQm7HIXl2Cvv6DO/s94yUCp8xYm85HyVwnf4J2+iHTTtzMsV5O096HJGwc6bpg4B5W1K6mf1VqQY8UWHqGFXxpkegXXO574XGlQjrsj2F3pULKmZLTC78wosSzSpn3ca3X3ff0pFzt2wvbqqBufliAOrAFhdRdElElmM8I7D5K2PUuddc76s7d8/q8lRXJZxnJHByGv8DkkwMi8p5TOn5G0PpzkMBOTMjvPygEgy/6CCszjAO4z8MjhJzAEQav0c0KQmcB56ZhzHnw4wegYTsKQJGA0Vycqp1zkze34dnTLl3yBYVX+IEJzVf8Rn3TyU92gBqPpKYsRtNpCir1PSkpExZOpmrG6zvOD0X3183jfiGGKLs9JAjU1euDp4TnXY9xVH7M2GJ8fq7JGuOs5xHH8kmMJEZKQFkpGPxI0oyzPwr6pWg9P4bHHtSeLiBgRLcHEAOawq5VTKcDWluOAJbt5viLw0bWPxZNIceaUxEJD55lAcw3kpgkQ6RYuDca7nIST5hczO2QRStK6K4T22Z8nOewiltAOdVGMmPHlV7nBJRPnHB2Cdg1BlT6PCUSluQBJicmzF4TTCV/n5fyUURyA8QfKRPlkmO0zK2ByEmJtlswH6qReSxXOeQIGBoRJJ5MhZDk094v3sKxwwxRkHJYLoBUHJm21BEPT/AYTDWuBdlB9yAAAAAElFTkSuQmCC)!important; + background-color: #fff!important; +} + + +.reply-indicator__content a{ + color: #76509c!important; +} + +.icon-button.inverted, .text-icon-button, .attachment-list__list { + color: #807591!important; +} +ul.attachment-list__list li a i.fa.fa-link, ul.attachment-list__list, .attachment-list__list a{ + color:#807591!important; +} + +.search { + border-radius: 4px!important; + margin-left: 10px!important; + margin-right: 10px!important; + +} + +.column-header, .column-header__button { + background: linear-gradient(0deg, #2a253155, #423a5022)!important; + filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4))!important; +} +.tabs-bar__wrapper{ + background: linear-gradient(0deg, #e4cbff22, #2a253199, #64548278, #e4cbff59)!important; + backdrop-filter: blur(5px)!important; + box-shadow: 0px 5px 10px #000a, 0px -20px 0px #1b1821!important; + border-radius: 5px!important; +} +.tabs-bar__wrapper{ + padding-top: 0px!important; + position:sticky!important;top: 10px!important; + margin-top: 10px!important; +} +.column-back-button{ + color: #fff!important; + text-shadow: 0px -1px 2px #0e0c11!important; + transition: all .3s!important; + background: linear-gradient(0deg, #2a253122, #423a5022)!important; + filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4))!important; +} + +.column-header__back-button{ + color: #fff!important; + text-shadow: 0px -1px 2px #0e0c11!important; + transition: all .3s!important; +} +.column-header__back-button:hover{ + text-shadow: 0px 0px 20px#fff, 0px 0px 40px#fff, 0px -1px 2px #0e0c11!important; + transition: all .3s!important; +} + + + + +.column-link { + background: linear-gradient(180deg, #27222f, #1d1a22)!important; + border-radius: 5px!important; + margin: 2px!important; + box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3)!important; +} + +.column-link.active, .column-link.active:hover, +.column-header__button.active { + background: linear-gradient(0deg, #2a2531, #625776)!important; + text-shadow: 0 -1px 1px #0006, 0 2px 10px!important; + color: #fff!important; + filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4))!important; + transition: all .3s!important; + border-radius: 5px!important; + margin: 0px!important; +} + +.column-link:hover { + background: linear-gradient(180deg, #484155, #34303c)!important; + text-shadow: 0 -1px 1px #0006, 0 2px 12px, 0 2px 55px!important; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 1)!important; + transition: all 0.2s!important; + padding-left: 12px!important; + margin-left: 0px!important; +} +.column-link:active { + background: linear-gradient(180deg, #27222f, #1d1a22)!important; + box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6)!important; + transition: all .1s!important; +} + +.icon-with-badge__badge { + border: 2px!important; + padding: 1px 5px!important; + filter: drop-shadow(0 0 5px #a288bd)!important;; +} + +.navigation-panel { + filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4))!important; +} + + +.icon-button.star-icon.active { + color: #ffac33!important; + text-shadow: 0px 0px 1px #000a, 0px 0px 20px, 0px 0px 10px, 0px 0px 30px #ffac33aa; +} + +.icon-button.active[aria-label="Unboost"] i { + filter: drop-shadow(0 0 1px #0002) drop-shadow(0 0 20px #8bb82d) drop-shadow(0 0 10px #8bb82d)!important; +} + +.webkit-scrollbar-track:hover { + background: #383144; +} + + + diff --git a/userstyles/spriters_resource_plus.css b/userstyles/spriters_resource_plus.css new file mode 100644 index 0000000..5c8e15e --- /dev/null +++ b/userstyles/spriters_resource_plus.css @@ -0,0 +1,104 @@ +/* ==UserStyle== +@name spriters_resource_plus +@namespace spriters_resource.com +@author lavender software, akira division +@version i forgor +==/UserStyle== */ + /* +warning: contains flashing lights! (*someone* found out about the animation property in css)*/ + +.recent-uploads{ + transition: 0s +} + + + + + + +/*icons*/ + +.iconheader{ + color: white!important; + border: 0px!important; + border-radius: 4px; + outline: 0px!important; + background-color: #a34d4d22; +} + +.iconheadertext{ + text-shadow: 0px 2px 5px #fff!important; + color: black; + font-size: 13px!important; +} +.iconheadertext:active{ + text-shadow: 0px 2px 5px #000!important; + color: white; + font-size: 13px!important; +} + +.iconbody{ + border: none!important; + border-radius: 4px!important; + margin-left: 4px!important; +} +.iconbody:hover{ + transition: 0.1s; + box-shadow: inset 0px 0px 50px #fff; +} +.iconcontainer{ + box-shadow: 0px 3px 4px #5f1c1caa; + border-radius: 4px!important; + border:none!important; + background-image: linear-gradient(#fff, #ebbebe, #fff); + transition: all ease-out 0.6s; +} +.iconcontainer:hover{ + box-shadow: 0px 3px 1px #5f1c1caa, 0px 3px 5px #ff8484, inset 0px 7px 50px #fff, inset 0px 7px 17px #fff; + background-image: linear-gradient(#fff, #fff); + transition: all ease-in-out 0s; + transform: translate(0px, -4px); +} +.iconcontainer:active{ + animation: flash 0.3s; + transform: translate(0px, 4px); + box-shadow: inset 0px -2px 5px #000; + transition: all ease-out 0s; + background-image: linear-gradient(#ff8e8e, #ebbebe, #fff); +} + +@keyframes flash{ + 0% { + background-image: linear-gradient(#fff, #fff); + } + 10% { + background-image: linear-gradient(#4a2828, #4a2828); + } + 20% { + background-image: linear-gradient(#fff, #fff); + } + 30% { + background-image: linear-gradient(#4a2828, #4a2828); + } + 40% { + background-image: linear-gradient(#fff, #fff); + } + 50% { + background-image: linear-gradient(#4a2828, #4a2828); + } + 60% { + background-image: linear-gradient(#fff, #fff); + } + 70% { + background-image: linear-gradient(#4a2828, #4a2828); + } + 80% { + background-image: linear-gradient(#fff, #fff); + } + 90% { + background-image: linear-gradient(#4a2828, #4a2828); + } + 100% { + background-image: linear-gradient(#fff, #fff); + } +} diff --git a/userstyles/spriters_resource_plus.css~ b/userstyles/spriters_resource_plus.css~ new file mode 100644 index 0000000..a8e94e1 --- /dev/null +++ b/userstyles/spriters_resource_plus.css~ @@ -0,0 +1,104 @@ +/* ==UserStyle== +@name spriters_resource_plus +@namespace spriters_resource.com +@author lavender software, akira division +@version i forgor +==/UserStyle== */ + /* +warning: contains flashing lights! (*someone* found out about the animation propertyS in css)*/ + +.recent-uploads{ + transition: 0s +} + + + + + + +/*icons*/ + +.iconheader{ + color: white!important; + border: 0px!important; + border-radius: 4px; + outline: 0px!important; + background-color: #a34d4d22; +} + +.iconheadertext{ + text-shadow: 0px 2px 5px #fff!important; + color: black; + font-size: 13px!important; +} +.iconheadertext:active{ + text-shadow: 0px 2px 5px #000!important; + color: white; + font-size: 13px!important; +} + +.iconbody{ + border: none!important; + border-radius: 4px!important; + margin-left: 4px!important; +} +.iconbody:hover{ + transition: 0.1s; + box-shadow: inset 0px 0px 50px #fff; +} +.iconcontainer{ + box-shadow: 0px 3px 4px #5f1c1caa; + border-radius: 4px!important; + border:none!important; + background-image: linear-gradient(#fff, #ebbebe, #fff); + transition: all ease-out 0.6s; +} +.iconcontainer:hover{ + box-shadow: 0px 3px 1px #5f1c1caa, 0px 3px 5px #ff8484, inset 0px 7px 50px #fff, inset 0px 7px 17px #fff; + background-image: linear-gradient(#fff, #fff); + transition: all ease-in-out 0s; + transform: translate(0px, -4px); +} +.iconcontainer:active{ + animation: flash 0.3s; + transform: translate(0px, 4px); + box-shadow: inset 0px -2px 5px #000; + transition: all ease-out 0s; + background-image: linear-gradient(#ff8e8e, #ebbebe, #fff); +} + +@keyframes flash{ + 0% { + background-image: linear-gradient(#fff, #fff); + } + 10% { + background-image: linear-gradient(#4a2828, #4a2828); + } + 20% { + background-image: linear-gradient(#fff, #fff); + } + 30% { + background-image: linear-gradient(#4a2828, #4a2828); + } + 40% { + background-image: linear-gradient(#fff, #fff); + } + 50% { + background-image: linear-gradient(#4a2828, #4a2828); + } + 60% { + background-image: linear-gradient(#fff, #fff); + } + 70% { + background-image: linear-gradient(#4a2828, #4a2828); + } + 80% { + background-image: linear-gradient(#fff, #fff); + } + 90% { + background-image: linear-gradient(#4a2828, #4a2828); + } + 100% { + background-image: linear-gradient(#fff, #fff); + } +}