Mirrors/catask
1
0
Fork 0
mirror of https://codeberg.org/catask-org/catask.git synced 2025-04-20 13:53:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

many changes for custom css

Browse source
This commit is contained in:
mst 2025-02-28 07:27:34 +03:00
parent 9826b7f426
commit 8905f17d36
No known key found for this signature in database
1 changed files with 142 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

172
templates/base.html
View file

@ -125,62 +125,173 @@
--bs-primary: {{ cfg.style.accentDark }} !important; --bs-primary: {{ cfg.style.accentDark }} !important;
} }
</style> </style>
{% endif %}
{% if cfg.style.customCss and cfg.style.useCustomCss %}
<style>
{{ cfg.style.customCss | safe }}
</style>
{% endif %}
<style>
/* some essential styles so 3rd-party themes don't break */
.markdown-content p {
margin: 0;
}
.markdown-content ol {
margin-bottom: 0;
}
.markdown-content blockquote {
border-left: 3px solid var(--bs-border-color);
}
.markdown-content blockquote p {
margin-left: .5rem;
}
.markdown-content p:not(:first-child) {
margin-top: .5rem;
}
.fw-buttons button {
width: 100%;
margin-top: .25rem;
margin-bottom: .25rem;
}
.tab {
display: inline-flex;
min-width: 130px;
align-items: center;
gap: .25em;
}
.htmx-indicator {
display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
display: inline-block;
}
.btn-close {
--bs-btn-close-bg: none;
}
.ts-share {
max-width: 300px;
text-overflow: ellipsis;
align-content: center;
}
.no-arrow.dropdown-toggle::after {
border: none;
display: none;
}
{#- for compatibility #}
{%- if cfg.style.useCustomCss and cfg.style.overrideCatAskStyles %}
.modal-header .btn-close i {
display: none;
}
{%- endif %}
@media screen and (max-width: 1200px) {
.ts-share {
max-width: 250px;
}
}
@media screen and (min-width: 620px) and (max-width: 991px) {
.modal-dialog {
--bs-modal-width: 95%;
}
}
@media screen and (max-width: 767px) {
.ts-share {
max-width: unset;
width: 100%;
}
}
@media screen and (min-width: 767px) and (max-width: 840px) {
.ts-share {
max-width: 190px;
}
}
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}">
{%- if cfg.accessibility.font == 'default' -%}
<link rel="preload" href="{{ url_for('static', filename='fonts/rubik.woff2') }}" as="font" type="font/woff2" crossorigin>
{%- endif -%}
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/favicon/apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icons/favicon/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='icons/favicon/favicon-16x16.png') }}">
<link rel="icon" type="image/png" sizes="192x192" href="{{ url_for('static', filename='icons/favicon/android-chrome-192x192.png') }}">
<link rel="icon" type="image/png" sizes="512x512" href="{{ url_for('static', filename='icons/favicon/android-chrome-512x512.png') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon/favicon.ico') }}">
<!-- metadata -->
<!-- Primary Meta Tags -->
<meta name="title" content="{{ metadata.title }}" />
<meta name="description" content="{{ metadata.description }}" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ metadata.url }}" />
<meta property="og:title" content="{{ metadata.title }}" />
<meta property="og:description" content="{{ metadata.description }}" />
<meta property="og:image" content="{{ metadata.image }}" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="{{ metadata.url }}" />
<meta property="twitter:title" content="{{ metadata.title }}" />
<meta property="twitter:description" content="{{ metadata.description }}" />
<meta property="twitter:image" content="{{ metadata.image }}" />
<!-- pwa manifest -->
<link rel="manifest" href="{{ url_for('api.pwaManifest') }}" />
<script src="{{ url_for('static', filename='js/color-modes.js') }}"></script>
{% block additionalHeadItems %}{% endblock %}
<script src="{{ url_for('static', filename='js/htmx.min.js') }}"></script> <script src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
<title>{% block title %}{% endblock %} | {{ cfg.instance.title }}</title> <title>{% block title %}{% endblock %} | {{ cfg.instance.title }}</title>
</head> </head>
<body class="ms-2 me-2 mb-2 col-xxl-11 mx-xxl-auto"> <body class="">
<a class="visually-hidden-focusable btn" href="#main-content">Skip to content</a> <a class="visually-hidden-focusable btn" href="#main-content">Skip to content</a>
<div class="container-fluid"> <div class="mb-2{% if not bodyNoXMargin %} px-3{% endif %} col-xxl-11{% if not noContainerFluid %} container-fluid{% endif %}">
{% block navbar %}
<div class="d-flex justify-content-between align-items-center mt-3 {% if logged_in %}mb-3{% endif %}"> <div class="d-flex justify-content-between align-items-center mt-3 {% if logged_in %}mb-3{% endif %}">
<ul class="nav nav-{{ cfg.style.navStyle }} position-relative"> <ul class="nav nav-{{ cfg.style.navStyle }} position-relative">
<li class="nav-item d-flex align-items-center {% if cfg.style.navStyle == 'pills' %}me-1{% endif %}"><a href="{{ url_for('index') }}" aria-label="{{ cfg.instance.title }}'s icon"><img src="{{ url_for('static', filename='icons/favicon/apple-touch-icon.png') }}" loading="lazy" width="32" height="32" alt="{{ cfg.instance.title }}'s icon"></a></li> <li class="nav-item d-flex align-items-center {% if cfg.style.navStyle == 'pills' %}me-1{% endif %}"><a href="{{ url_for('index') }}" aria-label="{{ cfg.instance.title }}'s icon"><img src="{{ url_for('static', filename='icons/favicon/apple-touch-icon.png') }}" loading="lazy" width="32" height="32" alt="{{ cfg.instance.title }}'s icon"></a></li>
<li class="nav-item d-flex align-items-center"> <ul class="d-flex p-0">
<a class="nav-link {{ homeLink }}" id="home-link" href="{{ url_for('index') }}"{% if cfg.style.navIconsOnly %} title="Home"{% endif %}> {% include 'snippets/navLinks.html' %}
{% if cfg.style.navIcons %}<i class="bi bi-house-door fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %} </ul>
{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>Home</span>{% endif %}
</a>
</li>
{% if logged_in %}
<li class="nav-item d-flex align-items-center position-relative">
<a class="nav-link {{ inboxLink }}{% if cfg.style.navIcons %} ms-1{% endif %}" id="inbox-link" href="{{ url_for('inbox') }}"{% if cfg.style.navIconsOnly %} title="Inbox"{% endif %}>
{% if questionCount > 0 %}<span class="position-absolute top-0 start-100 badge text-bg-primary rounded-circle" style="transform: translate(-80%,-30%) !important">{{ questionCount }} <span class="visually-hidden">unanswered questions</span></span>{% endif %}
{% if cfg.style.navIcons %}<i class="bi bi-inbox fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %}
{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>Inbox</span>{% endif %}
</a>
</li>
<li class="nav-item d-flex align-items-center">
<a class="nav-link {{ adminLink }}{% if cfg.style.navIcons %} ms-1{% endif %}" id="admin-link" href="{{ url_for('admin.information') }}"{% if cfg.style.navIconsOnly %} title="Admin"{% endif %}>
{% if cfg.style.navIcons %}<i class="bi bi-gear fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %}
{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>Admin</span>{% endif %}
</a>
</li>
{% endif %}
</ul> </ul>
<ul class="nav nav-{{ cfg.style.navStyle }} m-0"> <ul class="nav nav-{{ cfg.style.navStyle }} m-0">
{% if logged_in %} {% if logged_in %}
<form action="{{ url_for('admin.logout') }}" method="POST" class="d-none" id="logout_form"></form> <form action="{{ url_for('admin.logout') }}" method="POST" class="d-none" id="logout_form"></form>
<li> <li>
<button form="logout_form" type="submit" class="nav-link"{% if cfg.style.navIconsOnly %} title="Logout"{% endif %}> <button form="logout_form" type="submit" class="nav-link"{% if cfg.style.navIconsOnly %} title="{{ _('Logout') }}"{% endif %}>
{% if cfg.style.navIcons %}<i class="bi bi-box-arrow-right fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %} {% if cfg.style.navIcons %}<i class="bi bi-box-arrow-right fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %}
{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>Logout</span>{% endif %} {% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>{{ _('Logout') }}</span>{% endif %}
</button> </button>
</li> </li>
{% else %} {% else %}
<li> <li>
<a class="nav-link {{ loginLink }}" href="{{ url_for('admin.login') }}"{% if cfg.style.navIconsOnly %} title="Login"{% endif %}> <a class="nav-link {{ loginLink }}" href="{{ url_for('admin.login') }}"{% if cfg.style.navIconsOnly %} title="{{ _('Login') }}"{% endif %}>
{% if cfg.style.navIcons %}<i class="bi bi-box-arrow-in-right fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %} {% if cfg.style.navIcons %}<i class="bi bi-box-arrow-in-right fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %}
{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>Login</span>{% endif %} {% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>{{ _('Login') }}</span>{% endif %}
</a> </a>
</li> </li>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
{# will do later
<div class="d-flex border-top bg-body z-3 px-3 py-2 d-md-none fixed-bottom mobile-nav">
<ul class="nav nav-{{ cfg.style.navStyle }} position-relative d-flex justify-content-between w-100">
{% with mobileNav = True %}
{% include 'snippets/navLinks.html' %}
{% endwith %}
</ul>
</div>
#}
{% endblock %}
{% with messages = get_flashed_messages(with_categories=True) %} {% with messages = get_flashed_messages(with_categories=True) %}
{% if messages %} {% if messages %}
{% for category, message in messages %} {% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible col-lg-4 m-auto" role="alert"> <div class="alert alert-{{ category }} alert-dismissible col-lg-4 m-auto" role="alert">
<div>{{ message }}</div> <p class="m-0">{{ message }}</p>
<button type="button" class="btn-close d-flex align-items-stretch fs-5 p-3" aria-label="Close"><i class="bi bi-x-lg lh-sm"></i></button> <button type="button" class="btn-close d-flex align-items-stretch fs-5 p-3" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x-lg lh-sm"></i></button>
</div> </div>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
@ -188,8 +299,9 @@
<div id="main-content"> <div id="main-content">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
{% block footer %}
<footer class="py-3 my-4 d-flex justify-content-between align-items-center"> <footer class="py-3 my-4 d-flex justify-content-between align-items-center">
<div class="row"> <div class="d-flex gap-2">
<div class="dropdown bd-mode-toggle"> <div class="dropdown bd-mode-toggle">
<button class="btn btn-outline-secondary py-2 dropdown-toggle" <button class="btn btn-outline-secondary py-2 dropdown-toggle"
id="bd-theme" id="bd-theme"