Skip to content

Derpybooru update #777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Apr 30, 2025
Merged

Derpybooru update #777

Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f030e23
Style for code block in image desc. Style for comment input. Fixes
Waltorvi Apr 23, 2025
1fecd61
Some animations
Waltorvi Apr 28, 2025
a73a1ca
better links
Waltorvi Apr 28, 2025
5a3a602
better like/favorite buttons on picture page
Waltorvi Apr 28, 2025
f085287
i do not remember what is it
Waltorvi Apr 28, 2025
8dc2f5a
better boxes in forum page
Waltorvi Apr 28, 2025
af623fd
Fix for pagination
Waltorvi Apr 28, 2025
ddd941d
More fixes and prettify for comments and forum page
Waltorvi Apr 28, 2025
1bf80d5
better link
Waltorvi Apr 28, 2025
12499d2
Better link 2
Waltorvi Apr 28, 2025
9fcc51a
delete blur
Waltorvi Apr 28, 2025
306922b
whta i need commit it
Waltorvi Apr 28, 2025
2b73e82
deleted comment
Waltorvi Apr 28, 2025
c7b1c53
no !important need there!!!! It's break animation
Waltorvi Apr 28, 2025
17b5a00
better animation
Waltorvi Apr 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
225 changes: 215 additions & 10 deletions websites/derpibooru.org.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,16 @@ body[data-theme="light-blue"] {
}

/*derpy-image page*/
div#extrameta.image-metabar.flex.flex--wrap.block__header--user-credit.center--layout div span.image_uploader strong {
a {
background: transparent !important;
border-radius: 3px !important;
}
a:hover {
background: var(--header-hover-color) !important;
}
}

#image_options_area .block__header--js-tabbed {
border: none !important;
a {
Expand Down Expand Up @@ -232,15 +242,15 @@ body[data-theme="light-blue"] {
border: none !important;
border-radius: 6px !important;
color: #4f95db !important;
font-weight: 700 !important;
font-weight: 700;
}
#js-refresh-comments:hover {
color: var(--block-header-link-text-hover-color) !important;
background: var(--image-options-area-button-hover) !important;
}
#js-comment-form #fa,
#js-comment-form #hide-mobile {
transition: color 0.3s ease !important;
transition: color 0.3s ease;
}
#js-comment-form .button[type="submit"] {
border: none !important;
Expand Down Expand Up @@ -281,6 +291,55 @@ main#content.layout--wide div.layout--narrow div.js-sourcesauce div#image-source
}
}

main#content.layout--wide div.block.block__header .flex.flex--wrap.image-metabar.center--layout div.stretched-mobile-links {
a.interaction--comments:hover {
color: var(--pure-hover) !important
}
}

form#js-comment-form div.block div div.block__tab.communication-edit__tab.selected.js-preview-input-wrapper div.field textarea#js-comment-form_body.input.input--wide.input--text.input--resize-vertical.js-toolbar-input.js-preview-input {
border-radius: 6px !important;
}
form#js-comment-form div.block div div.block__tab.communication-edit__tab.selected.js-preview-input-wrapper div.field textarea#js-comment-form_body.input.input--wide.input--text.input--resize-vertical.js-toolbar-input.js-preview-input:focus {
background: var(--input-color) !important;
border-radius: 0px !important;
}

main#content.layout--wide div.layout--narrow div.image-description div.block div.block__content pre {
background: var(--image-options-area-background) !important;
border-radius: 6px !important;
padding: 12px !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
code {
font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace !important;
font-weight: 600 !important;
font-variation-settings: 'wght' 600 !important;
}
}

div#container.layout--center-aligned main#content.layout--wide div.block.block__header .flex.flex--wrap.image-metabar.center--layout div.stretched-mobile-links a {
border-radius: 6px;
}

.stretched-mobile-links:has(a.interaction--upvote.active):has(a.interaction--fave.active) {
a.interaction--upvote.active {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-left: none !important;
border-top-right-radius: 6px !important;
border-bottom-right-radius: 6px !important;
}

a.interaction--fave.active {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-right: none !important;
border-top-left-radius: 6px !important;
border-bottom-left-radius: 6px !important;
}
}


/* derpy-activity side */
body[data-theme="dark-blue"] {
--background-odd-color: rgba(0, 0, 0, 0.25) !important;
Expand Down Expand Up @@ -328,7 +387,7 @@ body[data-theme="light-blue"] {
}
a:first-child:hover {
margin-left: 0px !important;
margin-right: 12px!important
margin-right: 12px !important
}
}

Expand All @@ -340,12 +399,30 @@ a.block__header--single-item:hover {
transition: ease 0.1s !important;
}

form#js-comment-form div.block div div.block__tab.communication-edit__tab.selected.js-preview-input-wrapper div.field textarea#js-comment-form_body.input.input--wide.input--text.input--resize-vertical.js-toolbar-input.js-preview-input,
.block__tab.communication-edit__tab.selected.js-preview-input-wrapper div.field textarea#post_body.input.input--wide.input--text.input--resize-vertical.js-toolbar-input.js-preview-input {
transition: border 0.5s ease, border-radius 0.2s ease !important;
}

.block.communication,
.communication__options {
transition: ease 0.2s !important;
}

div#container.layout--center-aligned main#content.layout--wide div.block.block__header .flex.flex--wrap.image-metabar.center--layout div.stretched-mobile-links a {
transition: all ease 0.2s !important;
}

/* derpy-misc and fixes */
.media-box {
border: none !important;
}
.block__content {
.block__content:not(.flex):not(.alternating-color) {
border: none !important;
border-radius: 3px !important;
}
.block__content {
border: none !important
}
.block__header {
border-radius: 6px !important;
Expand Down Expand Up @@ -395,11 +472,54 @@ main#content.layout--wide div.block.block__header div.stretched-mobile-links {
.column-layout__left > div:nth-child(4) > div:nth-child(1) > a:nth-child(1) {
background: none !important;
}
.column-layout__main .block__header a {

div#container.layout--center-aligned main#content.layout--narrow div.block div.block__header:not(.block__header--light):not(.page__header):not(.flex) {
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
main#content.layout--narrow div.block div.block__header--sub.block__header--light.page__header div.page__info span.js-subscription-target {
a.js-subscription-link {
background: transparent !important;
border-radius: 6px !important;
}
a.js-subscription-link:hover {
background: var(--block-header-hover-color) !important;
color: var(--block-header-link-text-hover-color) !important;
border-radius: 6px !important;
}
}

:where(.block__header):not(:has(.stretched-mobile-links)) {
a {
background: transparent;
border-radius: 6px;
}
a:hover {
background: var(--block-header-hover-color);
color: var(--block-header-link-text-hover-color);
border-radius: 6px;
}
}

main#content.layout--narrow div.block div.block__header div.flex.flex--wrap.block__header.block__header--light.page__header {
background: transparent !important;
border-top: solid rgba(0, 0, 0, 0.3) 2px !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 6px !important;
border-bottom-right-radius: 6px !important;
}

main#content.layout--narrow div.page__pagination {
.page__pagination {
a {
background: transparent !important;
}
a:hover {
background: var(--block-header-hover-color) !important;
color: var(--block-header-link-text-hover-color) !important;
}
}
.pagination.hide-mobile-t {
a {
background: transparent !important;
}
Expand All @@ -410,13 +530,98 @@ main#content.layout--narrow div.page__pagination {
}

a.interaction--downvote.disabled {
background: transparent;
opacity: 50%;
background: transparent !important;
opacity: 50% !important;
}

div.media-box div.media-box__header.media-box__header--link-row a.interaction--comments:hover {
color: var(--pure-hover)
color: var(--pure-hover) !important;
}
a.block__header--single-item:hover {
background: var(--single-item-bg-hover) !important
}
}

main#content.layout--wide form#searchform.js-search-form div.block div.block__header.flex a:not(:hover) {
background: transparent !important;
}
main#content.layout--wide form#searchform.js-search-form div.block div.block__header.flex div.dropdown.block__header__dropdown-tab div.dropdown__content {
a {
background: rgba(0, 0, 0, 0.46) !important;
}
a:hover {
background: rgba(0, 0, 0, 0.64) !important;
}
}

.communication__body__text {
background: rgba(0, 0, 0, 0.21) !important;
border-radius: 6px !important;
margin-bottom: 6px !important;
padding-top: 1px !important;
}
hr {
background: linear-gradient(to right, rgba(0, 0, 0, 0.21), rgba(10, 10, 10, 0.11), rgba(0, 0, 0, 0.21)) !important;
}

.block__header--js-tabbed {
a {
border: none !important;
background: none !important;
}
a:hover {
border-radius: 6px !important;
background: var(--block-header-hover-color) !important;
color: var(--block-header-link-text-hover-color) !important;
}
}
.block__tab.communication-edit__tab.selected.js-preview-input-wrapper {
border: none !important;
}
.block__tab.communication-edit__tab.selected.js-preview-input-wrapper div.field textarea#post_body.input.input--wide.input--text.input--resize-vertical.js-toolbar-input.js-preview-input {
border-radius: 6px !important;
}
.block__tab.communication-edit__tab.selected.js-preview-input-wrapper div.field textarea#post_body.input.input--wide.input--text.input--resize-vertical.js-toolbar-input.js-preview-input:focus {
background: var(--input-color) !important;
border-radius: 0px !important;
}

.paragraph {
margin-left: 8px !important
}
.communication:target {
border: none !important;
}

.block.communication {
border-radius: 3px !important;
}
.block.communication:has(a.communication__interaction:hover) {
background: var(--header-hover-color) !important;
.communication__options {
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25) !important
}
}

.tagsinput {
background: var(--image-options-area-background) !important;
border-radius: 6px !important;
.input:focus {
background: var(--input-color) !important;
}
}
.quick-tag-table__tab > div {
border-right: 0 !important;
border-left: 0 !important;
background: rgba(0, 0, 0, 0.2) !important;
border-radius: 3px !important;
margin-right: 6px !important;
}
.block__tab.quick-tag-table__tab {
border-right: 0 !important;
border-left: 0 !important;
border-bottom: 0 !important;
}
.js-tagtable .block__header--js-tabbed {
background: var(--image-options-area-background) !important;
border-radius: 6px !important;
}
Loading