/*
 * FlashTux.org CSS Style
 *
 * SPDX-FileCopyrightText: 1999-2025 Sébastien Helleu <flashcode@flashtux.org>
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

body {
  background-color: var(--body-bg-color);
  color: var(--body-color);
}

a:not(.btn), a:not(.btn):visited, a:not(.btn):hover, a:not(.btn):active {
  color: var(--link-color);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1.5rem;
}

.h2, h2 {
  font-size: 2rem;
}

.h3, h3 {
  font-size: 1.75rem;
}

pre {
  margin-bottom: 0;
}

pre p {
  margin: 0;
}

tbody {
  border-top: none !important;
}

td {
  color: var(--td-color);
  background-color: inherit !important;
}

.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  color: var(--table-striped-tr-color);
  background-color: var(--table-striped-tr-bg-color) !important;
}

.alert-success {
  background-color: var(--alert-success-bg-color);
}

.alert-warning {
  background-color: var(--alert-warning-bg-color);
}

.alert-project {
  background-color: var(--alert-project-bg-color);
  border: var(--border);
}

.border {
  border: var(--border) !important;
}

.border-top {
  border-top: var(--border) !important;
}

.border-bottom {
  border-bottom: var(--border) !important;
}

.border-left {
  border-left: var(--border) !important;
}

.border-right {
  border-right: var(--border) !important;
}

.img-thumbnail {
  border-color: var(--img-thumbnail-border-color);
}

svg g, svg path {
  fill: var(--body-color);
}

ul {
  margin-bottom: 0;
}

/* ===== nav bar ===== */

.navbar {
  background-color: var(--navbar-bg-color);
  background: var(--navbar-bg);
  box-shadow: var(--navbar-box-shadow);
  padding: .5rem .1rem;
}

.navbar-flashtux .navbar-nav .nav-link {
  font-weight: bold;
  color: var(--navbar-color);
  padding: .06rem .2rem;
  margin: 0 .6rem;
}

.nav-link {
  padding: .5rem 1rem;
}

.navbar-flashtux .navbar-nav .nav-link:hover {
  color: var(--navbar-color);
}

.navbar-flashtux .navbar-toggler {
  border: var(--navbar-toggler-border);
}

.navbar-flashtux .navbar-toggler-icon {
  background-image: var(--navbar-toggler-icon-bg-image);
}

.nav-item {
  white-space: nowrap;
}

#nav1-home .nav-home, #nav1-weechat .nav-weechat, #nav1-eciadsl .nav-eciadsl,
#nav1-weewm .nav-weewm, #nav1-w3blacklist .nav-w3blacklist, #nav1-gmemo .nav-gmemo,
#nav1-flashtris .nav-flashtris, #nav1-coding .nav-coding, #nav1-games .nav-games {
  border-bottom: 2px solid;
}

.nav-tabs {
  margin-bottom: 1rem;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  background-color: var(--body-bg-color);
}

.nav-other-links a {
  text-decoration: none;
}

.nav-other-links svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.nav-other-links svg g, .nav-other-links svg path {
  fill: var(--link-color);
}

/* ===== page content ===== */

.content {
  padding: 2.5rem 1.5rem;
}

/* ===== forms ===== */

.form-select {
  background-color: var(--form-select-bg-color);
  color: var(--form-select-color);
}

.required label:after {
  content: " *";
  color: var(--form-required-color);
}

.helptext {
  font-size: 80%;
}

/* ===== pagination ===== */

.page-link, .page-item.active .page-link, .page-item.disabled .page-link {
  background: none;
  border: var(--page-link-border);
}

.page-item.active .page-link {
  background-color: var(--page-link-active-bg-color);
}

.page-item.disabled .page-link {
  color: var(--page-link-disabled-color);
}

.page-link:hover {
  background-color: var(--page-link-hover-bg-color);
}

/* ===== pages ===== */

.count-comments {
  padding-top: 1rem;
  margin-top: 1rem;
}

.comments {
  margin-left: -3rem;
}

.comment {
  margin: 1.5rem 0 1.5rem 3rem;
}

.comment-box {
  border: var(--border);
  border-radius: 4px;
}

.comment-title {
  padding: .5rem;
  background: var(--comment-title-bg-color);
  border-bottom: var(--border);
}

.comment-name-date {
  color: var(--comment-name-date-color);
  padding: .2rem 0 0 .5rem;
  margin: 0;
}

.comment-content {
  padding: .5rem;
  margin-top: .5rem;
}

.comment-reply {
  padding: .5rem;
}

.image img {
  margin: .8rem 0;
}

.btn svg {
  vertical-align: text-top;
}

.svg object {
  margin: 0 20%;
}

.doc svg g, .doc svg path {
  fill: var(--link-color);
}

.modem-status {
  width: 150px;
  height: 150px;
  line-height: 150px;
}

/* modem not supported */
.modem-status-0 {
  background-color: var(--modem-status-not-supported-bg-color);
}

/* modem maybe supported */
.modem-status-1 {
  background-color: var(--modem-status-maybe-supported-bg-color);
}

/* modem supported */
.modem-status-2 {
  background-color: var(--modem-status-supported-bg-color);
}

.severity1 svg g, .severity1 svg path
  fill: var(--severity1-svg-fill);
}

.severity2 svg g, .severity2 svg path {
  fill: var(--severity2-svg-fill);
}

.severity3 svg g, .severity3 svg path {
  fill: var(--severity3-svg-fill);
}

.fixed svg g, .fixed svg path {
  fill: var(--fixed-svg-fill);
}

.zimg {
  display: inline-block;
  margin-right: .3em;
  width: 42px;
  height: 42px;
  line-height: 42px;
}

.zimg img {
  position: absolute;
  margin: 4px 0 0 4px;
}

.zimg-ok {
  background-color: var(--zimg-ok-bg-color);
}

.zimg-ko {
  background-color: var(--zimg-ko-bg-color);
}

.zimg1 {
  z-index: 2;
}

.zimg2 {
  z-index: 3;
}

.letter .highlight {
  color: var(--letter-highlight-color);
  font-weight: bold;
}

/* ===== footer ===== */

.footer {
  background-color: var(--footer-bg-color);
}

.footer .wave {
  height: 125px;
  background-color: var(--footer-wave-bg-color);
  overflow: hidden;
}

.footer .wave svg {
  width: 100%;
  height: 100%;
}

.footer .wave svg path {
  fill: var(--footer-wave-svg-fill);
  stroke: none;
}

.footer .main {
  font-size: 1.2rem;
  font-weight: bold;
}

.footer li {
  margin: .8rem 0;
  list-style-type: none;
  line-height: 30px;
}

.footer .icons a {
  text-decoration: none;
}

.footer .icons svg {
  width: 24px;
  height: 24px;
  margin: 0 .5rem;
}

.footer .icons svg g, .footer .icons svg path {
  fill: var(--link-color);
}