Revert "stop using background css property and use its parts instead"

This reverts commit e4e67a4424.
master
Aevann1 2022-12-04 00:17:24 +02:00
parent 5665bd9a96
commit 49263fdd86
20 changed files with 82 additions and 84 deletions

View File

@ -45,7 +45,7 @@ body {
.App-side {
height: 100%;
flex: 1;
background-color: var(--gray-500);
background: var(--gray-500);
position: relative;
}
@ -69,7 +69,7 @@ body {
.App-drawer {
z-index: 2;
display: flex;
background-color: var(--background);
background: var(--background);
height: 100%;
}
@ -135,4 +135,4 @@ lite-youtube {
.btn-secondary:focus {
border: none !important;
box-shadow: none !important;
}
}

View File

@ -31,5 +31,5 @@
.ActivityList-activity:hover {
cursor: pointer;
background-color: #ffffff05;
}
background: #ffffff05;
}

View File

@ -5,7 +5,7 @@
}
.ChatMessage__isDm {
background-color: var(--gray-800);
background: var(--gray-800);
border-top: 1px dashed var(--primary);
border-bottom: 1px dashed var(--primary);
}
@ -69,7 +69,7 @@
right: 0;
cursor: pointer;
z-index: 5;
background-color: none !important;
background: none !important;
border: none !important;
box-shadow: none !important;
display: flex;
@ -77,7 +77,7 @@
}
.ChatMessage-actions-button button {
background-color: none !important;
background: none !important;
border: none !important;
padding: 0 !important;
}
@ -95,7 +95,7 @@
right: 0;
bottom: 0;
left: 0;
background-color: rgba(20, 20, 20, 0.85);
background: rgba(20, 20, 20, 0.85);
display: flex;
align-items: center;
justify-content: flex-end;
@ -106,7 +106,7 @@
.ChatMessage-actions button {
font-size: 10px;
background-color: none !important;
background: none !important;
}
/* List */
@ -121,5 +121,5 @@
}
.ChatMessageList-group:nth-child(even) {
background-color: rgba(255, 255, 255, 0.025);
background: rgba(255, 255, 255, 0.025);
}

View File

@ -130,7 +130,7 @@ export function ChatMessage({
style={
isMention && !dm
? {
background-color: `#${themeColor}25`,
background: `#${themeColor}25`,
borderLeft: `1px solid #${themeColor}`,
}
: {}

View File

@ -71,7 +71,7 @@ blockquote p {
}
.transparent {
background-color: None !important;
background: None !important;
}
.btn {
@ -87,8 +87,7 @@ blockquote p {
}
.navbar-light, .navbar .container-fluid, #mobile-bottom-navigation-bar {
background-color:#ffe;
background-image: url(/assets/images/4chan.webp);
background:#ffe url(/assets/images/4chan.webp);
background-size: contain;
}
@ -140,7 +139,7 @@ blockquote a {
}
.comment-anchor:target, .unread {
background-color: #ffffff88 !important;
background: #ffffff88 !important;
}
.sidebar

View File

@ -75,7 +75,7 @@ blockquote {
}
.transparent {
background-color: None !important;
background: None !important;
}
.btn {
@ -91,7 +91,7 @@ blockquote {
}
.comment-anchor:target, .unread {
background-color: #ffffff88 !important;
background: #ffffff88 !important;
}
.sidebar

View File

@ -29,17 +29,17 @@
}
.form-control {
background-color: transparent;
background: transparent;
border-color: var(--primary) !important;
}
.btn {
background-color: transparent;
background: transparent;
border-color: var(--primary) !important;
}
.form-control:disabled, [readonly] {
background-color: transparent;
background: transparent;
border-color: var(--primary) !important;
}
@ -64,7 +64,7 @@ pre {
}
.transparent {
background-color: None !important;
background: None !important;
}

View File

@ -30,17 +30,17 @@
}
.form-control {
background-color: transparent;
background: transparent;
border-color: var(--primary) !important;
}
.btn {
background-color: transparent;
background: transparent;
border-color: var(--primary) !important;
}
.form-control:disabled, [readonly] {
background-color: transparent;
background: transparent;
border-color: var(--primary) !important;
}
@ -65,7 +65,7 @@ pre {
}
.transparent {
background-color: None !important;
background: None !important;
}
blockquote {
@ -77,7 +77,7 @@ blockquote {
}
.comment-anchor:target, .unread {
background-color: #00000055 !important;
background: #00000055 !important;
}
h5.post-title a:visited {

View File

@ -1,6 +1,6 @@
@charset "UTF-8";
button {
background-color: none;
background: none;
border: none;
padding: 0;
margin: 0;
@ -1021,7 +1021,7 @@ input[type=submit].btn-follow, input[type=reset].btn-follow, input[type=button].
width: 1rem;
height: 1rem;
content: "";
background-color: no-repeat 50%/50% 50%;
background: no-repeat 50%/50% 50%;
}
.custom-checkbox .custom-control-label::before {
border-radius: 0.35rem;
@ -1185,7 +1185,7 @@ nav
height: 1.5em;
vertical-align: middle;
content: "";
background-color: no-repeat center center;
background: no-repeat center center;
background-size: 100% 100%;
}
@media (max-width: 767.98px) {
@ -2812,7 +2812,7 @@ ol > li::before {
height: auto;
}
.navbar-toggler-icon, .navbar-dark .navbar-toggler-icon, .navbar-light .navbar-toggler-icon {
background-color: transparent;
background: transparent;
}
.navbar-toggler, .navbar-dark .navbar-toggler, .navbar-light .navbar-toggler {
border: none;
@ -3021,7 +3021,7 @@ label.color-radio span {
color: var(--muted);
border-color: var(--muted);
border-width: 2px;
background-color: #dee2e6;
background: #dee2e6;
transition: none;
}
.form-control:disabled, [readonly] {
@ -4456,7 +4456,7 @@ pre .com, code .com {
width: 100%;
overflow-x: auto;
white-space: nowrap;
background-color: transparent;
background: transparent;
}
#thread .post-title {
font-size: 16px;
@ -4468,7 +4468,7 @@ pre .com, code .com {
padding: 0;
}
#submit .submission .footer {
background-color: transparent;
background: transparent;
padding: 1rem 0;
}
.footer .list-inline-item {
@ -4587,10 +4587,10 @@ span.green {
border: 2px solid #e9ecef;
}
.btn {
background-color: transparent;
background: transparent;
}
.form-control {
background-color: transparent;
background: transparent;
}
.navbar-light .navbar-nav .nav-link {
border-radius: 5px;
@ -4642,7 +4642,7 @@ span.green {
background-color: var(--background) !important;
}
.nobackground {
background-color: None !important;
background: None !important;
}
textarea {
resize: both !important;
@ -5149,7 +5149,7 @@ html {
display: block;
}
.comment-anchor:target, .unread {
background-color: #ffffff22 !important;
background: #ffffff22 !important;
padding: 12px;
padding-bottom: 4px;
}
@ -5158,8 +5158,8 @@ html {
padding: 2px 5px 3px 5px;
border-radius: 5px;
color:white!important;
background-color: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);
background-color: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet );
background: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet );
text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black;
}
@ -5183,7 +5183,7 @@ html {
display: flex;
flex-direction: column;
padding: 0;
background-color: var(--gray-600);
background: var(--gray-600);
}
.popover-body {
@ -5233,7 +5233,7 @@ a.emojitab {
}
.emoji2 {
background-color: None!important;
background: None!important;
width:60px;
overflow: hidden;
border: none;
@ -5254,7 +5254,7 @@ a.emojitab {
}
.notif-count {
background-color: red;
background: red;
border-radius: 20%;
color: white;
padding: 2px 5px;
@ -6112,8 +6112,8 @@ g {
margin: 5px 1px;
border-radius: 5px;
color:white!important;
background-color: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);
background-color: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet );
background: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet );
text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black;
font-weight: 600;
border: 2px solid var(--primary);
@ -6194,8 +6194,8 @@ g {
.btn-rainbow {
color:white !important;
background-color: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet) !important;
background-color: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet ) !important;
background: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet) !important;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet ) !important;
text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black !important;
}
@ -6326,7 +6326,7 @@ div.markdown {
}
.popover-bio-div::-webkit-scrollbar {
background-color: transparent;
background: transparent;
}
.popover-badges-div {
@ -6337,7 +6337,7 @@ div.markdown {
}
.popover-badges-div::-webkit-scrollbar {
background-color: transparent;
background: transparent;
}
@media (max-width: 768px) {
@ -6395,7 +6395,7 @@ div.markdown {
.modlog-action {
display: flex;
flex-wrap: wrap;
background-color: var(--gray-600) !important;
background: var(--gray-600) !important;
position: relative;
align-items: center;
justify-content: space-between;

View File

@ -27,7 +27,7 @@ body, .navbar-light, .navbar-dark, .card, .modal-content, .comment-write textare
}
.transparent, #login {
background-color: None !important;
background: None !important;
}
.tooltip-inner {

View File

@ -9,7 +9,7 @@
}
.container, #userpage > div.container-fluid, #root > div.App {
background-color: rgba(28, 34, 41, 0.90) !important;
background: rgba(28, 34, 41, 0.90) !important;
}
.fixed-bottom, .popover, .modal-content, .dropdown-menu, .navbar, body, .form-control, #speed-carot-modal {
@ -17,5 +17,5 @@
}
.App-side, .flaggers, .comment-section {
background-color: transparent !important;
background: transparent !important;
}

View File

@ -203,7 +203,7 @@
}
.transparent {
background-color: None !important;
background: None !important;
}
.btn-danger.disabled, .btn-danger:disabled {

View File

@ -36,7 +36,7 @@
}
.pseudo-submit-form .card-header, .card-blank .card-header, .navbar-light, .nav, .flex-row.bg-gray-200.sticky.justify-content-center.d-flex.d-sm-none.mt-3.mb-3.mb-sm-5.rounded {
background-color: var(--white) !important;
background: var(--white) !important;
color: var(--white) !important;
}
.navbar-light > *, .navbar-brand, .nav-link{
@ -47,7 +47,7 @@
border: 2px outset white !important;
border-bottom: 2px solid #a7a5a1 !important;
border-right: 2px solid #a7a5a1 !important;
background-color: var(--gray-500) !important;
background: var(--gray-500) !important;
color: #000 !important;
}
@ -63,7 +63,7 @@
}
.dropdown-menu, .btn:hover {
background-color: var(--gray-500) !important;
background: var(--gray-500) !important;
color: #000 !important;
}
@ -103,7 +103,7 @@ blockquote {
}
.form-control, .form-control:disabled, [readonly] {
background-color: white !important;
background: white !important;
color: black !important
}
@ -116,7 +116,7 @@ blockquote {
}
.transparent {
background-color: None !important;
background: None !important;
}
.black {
@ -145,7 +145,7 @@ blockquote {
}
#thread {
background-color: var(--white) !important;
background: var(--white) !important;
}
#profilestuff > * {
@ -153,7 +153,7 @@ blockquote {
}
.comment-anchor:target, .unread {
background-color: #ffffffaa !important;
background: #ffffffaa !important;
}
.sidebar

View File

@ -8,7 +8,7 @@
}
body {
background-color: var(--background);
background: var(--background);
}
.center {
@ -38,7 +38,7 @@
.button {
background-color: var(--background)!important;
background-color: 0 0;
background: 0 0;
font-weight: 600;
font-size: 1rem;
border-radius: 0.2rem;

View File

@ -39,7 +39,7 @@ def settings_personal(v:User):
@auth_required
@ratelimit_user()
def remove_background(v):
if v.background-color:
if v.background:
v.background = None
if v.theme == 'transparent': v.theme = 'midnight'
g.db.add(v)
@ -264,7 +264,7 @@ def settings_personal_post(v):
theme = request.values.get("theme")
if not updated and theme:
if theme in THEMES:
if theme == "transparent" and not v.background-color:
if theme == "transparent" and not v.background:
abort(409, "You need to set a background to use the transparent theme")
v.theme = theme
if theme == "win98": v.themecolor = "30409f"

View File

@ -398,7 +398,7 @@
flex: 1;
height: 60px;
border: 1px solid white;
background-color: green;
background: green;
display: flex;
align-items: center;
justify-content: center;
@ -407,15 +407,15 @@
}
.roulette-table-number__black {
background-color: black;
background: black;
}
.roulette-table-number__red {
background-color: red;
background: red;
}
.roulette-table-number__green {
background-color: green;
background: green;
}
.roulette-table-row {
@ -428,7 +428,7 @@
flex: 1;
height: 60px;
border: 1px solid white;
background-color: green;
background: green;
display: flex;
align-items: center;
justify-content: center;
@ -441,7 +441,7 @@
.roulette-table-line,
.roulette-table-1to1 {
border: 1px solid white;
background-color: green;
background: green;
display: flex;
align-items: center;
justify-content: center;

View File

@ -107,7 +107,7 @@
{% if v %}
{% if v.notifications_count %}
<a class="mobile-nav-icon d-md-none" href="/notifications{% if v.notifications_do %}/{{v.notifications_do}}{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="notif-{{v.notifications_do}}-bell fas fa-bell align-middle" style="color: {{v.notifications_color}}"></i><span class="notif-count notif-{{v.notifications_do}} ml-1" style="padding-left: 4.5px;{% if v.notifications_do %}background-color:{{v.notifications_color}}{% endif %}">{{v.notifications_count}}</span></a>
<a class="mobile-nav-icon d-md-none" href="/notifications{% if v.notifications_do %}/{{v.notifications_do}}{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="notif-{{v.notifications_do}}-bell fas fa-bell align-middle" style="color: {{v.notifications_color}}"></i><span class="notif-count notif-{{v.notifications_do}} ml-1" style="padding-left: 4.5px;{% if v.notifications_do %}background:{{v.notifications_color}}{% endif %}">{{v.notifications_count}}</span></a>
{% else %}
<a class="mobile-nav-icon d-md-none" href="/notifications" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="fas fa-bell align-middle text-gray-500 black"></i></a>
{% endif %}
@ -151,7 +151,7 @@
{% if v.notifications_count %}
<li class="nav-item d-flex align-items-center text-center justify-content-center mx-1">
<a class="nav-link position-relative" href="/notifications{% if v.notifications_do %}/{{v.notifications_do}}{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="notif-{{v.notifications_do}}-bell fas fa-bell" style="color: {{v.notifications_color}}"></i><span class="notif-{{v.notifications_do}} notif-count ml-1" style="padding-left: 4.5px;{% if v.notifications_do %}background-color:{{v.notifications_color}}{% endif %}">{{v.notifications_count}}</span></a>
<a class="nav-link position-relative" href="/notifications{% if v.notifications_do %}/{{v.notifications_do}}{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="notif-{{v.notifications_do}}-bell fas fa-bell" style="color: {{v.notifications_color}}"></i><span class="notif-{{v.notifications_do}} notif-count ml-1" style="padding-left: 4.5px;{% if v.notifications_do %}background:{{v.notifications_color}}{% endif %}">{{v.notifications_count}}</span></a>
</li>
{% else %}
<li class="nav-item d-flex align-items-center text-center justify-content-center mx-1">

View File

@ -2,7 +2,7 @@
<div class="row fixed-bottom bg-white border-top p-2" id="mobile-bottom-navigation-bar"
style="z-index: 1000; bottom: 0px; transition: bottom cubic-bezier(0, 0, 0.2, 1) 220ms;">
<button type="button" class="col px-0 ml-3 btn btn-dead m-0" style="background-color: None !important; border: None;">
<button type="button" class="col px-0 ml-3 btn btn-dead m-0" style="background: None !important; border: None;">
<a href="/" class="text-decoration-none">
<div class="text-center {% if request.path=='/' and request.full_path!='/?sort=hot&t=all' and request.full_path!='/?sort=new&t=all' %}text-primary{% else %}text-muted{% endif %}">
<i class="fas fa-home-alt text-lg"></i>
@ -11,7 +11,7 @@
</a>
</button>
{% if v and v.defaultsorting == 'new' %}
<button type="button" class="col px-0 btn btn-dead m-0" style="background-color: None !important; border: None;">
<button type="button" class="col px-0 btn btn-dead m-0" style="background: None !important; border: None;">
<a href="/?sort=hot&t=all" class="text-decoration-none">
<div class="text-center {% if request.full_path=='/?sort=hot&t=all' %}text-primary{% else %}text-muted{% endif %}">
<i class="fas fa-fire text-lg"></i>
@ -20,7 +20,7 @@
</a>
</button>
{% else %}
<button type="button" class="col px-0 btn btn-dead m-0" style="background-color: None !important; border: None;">
<button type="button" class="col px-0 btn btn-dead m-0" style="background: None !important; border: None;">
<a href="/?sort=new&t=all" class="text-decoration-none">
<div class="text-center {% if request.full_path=='/?sort=new&t=all' %}text-primary{% else %}text-muted{% endif %}">
<i class="fas fa-sparkles text-lg"></i>
@ -29,7 +29,7 @@
</a>
</button>
{% endif %}
<button type="button" class="col px-2 btn btn-dead m-0" style="background-color: None !important; border: None;">
<button type="button" class="col px-2 btn btn-dead m-0" style="background: None !important; border: None;">
<a href="/comments" class="text-decoration-none">
<div class="text-center {% if request.path=='/comments' %}text-primary{% else %}text-muted{% endif %}">
<i class="fas fa-comment-dots text-lg"></i>
@ -37,7 +37,7 @@
</div>
</a>
</button>
<button type="button" class="col px-0 btn btn-dead m-0" style="background-color: None !important; border: None;">
<button type="button" class="col px-0 btn btn-dead m-0" style="background: None !important; border: None;">
<a href="/leaderboard" class="text-decoration-none">
<div class="text-center {% if request.path=='/leaderboard' %}text-primary{% else %}text-muted{% endif %}">
<i class="fas fa-trophy text-lg"></i>
@ -47,7 +47,7 @@
</button>
{% if v %}
{% if FEATURES['CHAT'] and loggedin_chat >= CHAT_DISPLAY_USER_COUNT_MINIMUM -%}
<button type="button" class="col px-0 btn btn-dead m-0 pt-0" style="background-color: None !important; border: None;">
<button type="button" class="col px-0 btn btn-dead m-0 pt-0" style="background: None !important; border: None;">
<a href="/chat" class="text-decoration-none">
<div class="text-center {% if request.path=='/chat' %}text-primary{% else %}text-muted{% endif %}">
<b class="text-lg" style="padding-top:10px" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Users in chat right now">{{loggedin_chat}}</b>
@ -57,7 +57,7 @@
</button>
{%- endif %}
{% if FEATURES['AWARDS'] -%}
<button type="button" class="col px-0 mr-3 btn btn-dead m-0" style="background-color: None !important; border: None;">
<button type="button" class="col px-0 mr-3 btn btn-dead m-0" style="background: None !important; border: None;">
<a href="/shop" class="text-decoration-none">
<div class="text-center {% if request.path=='/shop' %}text-primary{% else %}text-muted{% endif %}">
<i class="fas fa-store text-lg"></i>
@ -67,7 +67,7 @@
</button>
{%- endif %}
{% else %}
<button type="button" class="col px-0 mr-3 btn btn-dead m-0" style="background-color: None !important; border: None;">
<button type="button" class="col px-0 mr-3 btn btn-dead m-0" style="background: None !important; border: None;">
<a href="/signup?redirect={{request.full_path | urlencode}}" class="text-decoration-none">
<div class="text-center text-muted">
<i class="fas fa-user-plus text-lg"></i>

View File

@ -72,7 +72,7 @@
<div id="tab-content" class="tab-content d-flex flex-wrap py-3 pl-2" hidden>
<style>
.emoji2 {
/*background-color: None!important;*/
/*background: None!important;*/
width:60px;
height: 85px;
overflow: hidden;

View File

@ -170,9 +170,8 @@
{% if background %}
<style>
body {
background-image: url("/i/backgrounds/{{background}}.webp?v=4");
background:url("/i/backgrounds/{{background}}.webp?v=4") center center fixed;
background-color: var(--background);
background-attachment: fixed;
{% if 'anime/' not in background -%}
background-size: cover;
{%- endif %}