diff --git a/websites/derpibooru.org.css b/websites/derpibooru.org.css index 866328bd..d2029595 100644 --- a/websites/derpibooru.org.css +++ b/websites/derpibooru.org.css @@ -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 { @@ -232,7 +242,7 @@ 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; @@ -240,7 +250,7 @@ body[data-theme="light-blue"] { } #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; @@ -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; @@ -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 } } @@ -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; @@ -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; } @@ -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 -} \ No newline at end of file +} + +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; +}