my userstyles!

This commit is contained in:
Akira Olivia Pink 2021-12-09 19:45:35 -03:00
parent 2be00fa2e1
commit 762f59e5b1
7 changed files with 5842 additions and 68 deletions

File diff suppressed because it is too large Load diff

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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,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)!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,

View file

@ -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,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)!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;
}

View file

@ -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);
}
}

View file

@ -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);
}
}