#headerimg > h1 > a {
text-decoration: none;
}
.font-tools .ft-tools-menu {
display: flex;
flex-flow: column wrap;
width: 100%;
padding: 0.5rem;
font-size: 0.875rem;
list-style: none;
margin: 0;
}
.font-tools .ft-tools-menu li {
list-style: none;
margin: 0;
padding: 0;
}
.font-tools .ft-tools-menu li a {
display: flex;
gap: 0.5rem;
align-items: center;
padding: 0.5rem 1rem;
color: inherit;
text-decoration: none;
border-radius: 0.375rem;
}
.font-tools .ft-tools-menu li a:hover {
background: rgba(0, 0, 0, 0.06);
}
.font-tools .ft-tools-menu li a.menu-active {
background: #4b5563;
color: #ffffff;
}
.font-tools .ft-footer-menu {
display: flex;
flex-direction: row;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
} .font-tools .drawer-toggle,
.font-tools .drawer-overlay {
display: none !important;
}
.font-tools .drawer {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
width: 100%;
}
.font-tools .drawer-content {
grid-column: 2;
width: 100%;
}
.font-tools .drawer-side {
position: relative !important;
top: auto !important;
left: auto !important;
inset: auto !important;
grid-column: 1;
grid-row: 1;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
width: 240px !important;
height: auto !important;
min-height: calc(100vh - 120px);
overflow: visible !important;
z-index: 1 !important;
}
.font-tools .drawer-side > aside {
position: sticky;
top: 120px;
width: 240px !important;
height: calc(100vh - 120px) !important;
overflow-y: auto;
background: var(--color-base-200);
}
.font-tools .drawer-side > :not(.drawer-overlay) {
translate: 0 !important;
transform: none !important;
} .font-tools .drawer-side {
background: #f7f8fb !important;
border-right: 1px solid #e5e7eb;
}
.font-tools .drawer-side > aside {
padding: 18px 14px;
background: #f7f8fb !important;
border-right: 1px solid #e5e7eb;
} .font-tools .drawer-side .menu,
.font-tools .drawer-side .ft-tools-menu {
width: 100% !important;
padding: 0 !important;
gap: 6px;
} .font-tools .drawer-side .menu li,
.font-tools .drawer-side .ft-tools-menu li {
margin: 0 0 6px;
} .font-tools .drawer-side .menu li a,
.font-tools .drawer-side .ft-tools-menu li a {
display: flex !important;
align-items: center;
gap: 10px;
color: #1f2937 !important;
background: transparent !important;
line-height: 1.3;
text-decoration: none !important;
border-radius: 10px;
transition: all 0.18s ease;
} .font-tools .drawer-side .menu li a svg,
.font-tools .drawer-side .ft-tools-menu li a svg {
color: #64748b !important;
stroke: currentColor;
} .font-tools .drawer-side .menu li a:hover,
.font-tools .drawer-side .ft-tools-menu li a:hover {
color: #111827 !important;
background: #eef2ff !important;
transform: translateX(2px);
} .font-tools .drawer-side .menu li a.menu-active,
.font-tools .drawer-side .ft-tools-menu li a.menu-active,
.font-tools .drawer-side .menu li.current-menu-item > a,
.font-tools .drawer-side .ft-tools-menu li.current-menu-item > a {
color: #ffffff !important;
background: linear-gradient(135deg, #adceff, #1e293b) !important;
font-weight: 700;
box-shadow: 0 6px 14px rgba(30, 41, 59, 0.22);
} .font-tools .drawer-side .menu li a.menu-active svg,
.font-tools .drawer-side .ft-tools-menu li a.menu-active svg,
.font-tools .drawer-side .menu li.current-menu-item > a svg,
.font-tools .drawer-side .ft-tools-menu li.current-menu-item > a svg {
color: #ffffff !important;
} .font-tools .drawer-side .menu li a:empty,
.font-tools .drawer-side .ft-tools-menu li a:empty {
display: none !important;
} .font-tools .drawer-side .menu li:empty,
.font-tools .drawer-side .ft-tools-menu li:empty {
height: 1px;
margin: 10px 0;
background: #e5e7eb;
opacity: 1;
} .font-tools .drawer {
grid-template-columns: 260px minmax(0, 1fr) !important;
}
.font-tools .drawer-content {
grid-column: 2 !important;
}  .font-tools-mobile-select-wrap {
display: none;
}
@media (max-width: 991px) {
.font-tools-mobile-select-wrap {
display: block;
width: 100%;
padding: 12px 16px 10px;
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
}
.font-tools-mobile-select-inner {
width: 100%;
max-width: 100%;
}
.font-tools-mobile-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
height: 56px;
padding: 0 52px 0 18px;
font-size: 16px;
font-weight: 600;
color: #111827;
background-color: #ffffff;
border: 2px solid #d1d5db;
border-radius: 18px;
outline: none;
box-shadow:
0 2px 10px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 20px 20px;
}
.font-tools-mobile-select:focus {
border-color: #94a3b8;
box-shadow:
0 0 0 4px rgba(148, 163, 184, 0.18),
0 2px 10px rgba(15, 23, 42, 0.08);
} .font-tools .drawer-side {
display: none !important;
} .font-tools .drawer-content,
.font-tools #main {
width: 100% !important;
max-width: 100% !important;
display: block !important;
overflow: visible !important;
} .font-tools .drawer-content > nav.navbar {
display: none !important;
}
}
.font-tools #font-dropzone {
background: #f5f7f9;
border-width: 1px;
border-style: dashed;
margin: 0;
border-radius: .5rem;
padding: 1rem;
}
.font-tools .dropzone {
position: relative;
}
.font-tools .dropzone .template-container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.font-tools #font-dropzone .mantine-Group-root {
display: flex;
align-items: center;
gap: 1rem;
margin: 0 auto;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
.font-tools .dropzone .template-container input[type="file"] {
border: 0;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
height: 1px;
margin: 0 -1px -1px 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.font-tools .dropzone .template-container svg {
width: 52px;
height: 52px;
color: #868e96;
}
.font-tools .dropzone > *:not(.template-container),
.font-tools .dropzone .dz-complete,
.font-tools .dropzone .dz-message {
display: none;
}
.font-tools .dropzone .template-container .mantine-Text-root {
color: #888;
font-size: 13px;
}
.font-tools .dropzone .template-container .mantine-Text-root:first-child {
font-weight: 700;
font-size: 15px;
margin-bottom: 4px;
color: #333;
line-height: 21px;
}
.font-tools .dropzone .template-container .mantine-Text-root:last-child {
margin-bottom: 0;
}
.font-tools #webfont-converter {
display: flex;
flex-direction: column;
gap: 2rem;
}
.font-tools .mantine-Stack-root {
display: flex;
flex-direction: column;
gap: 1rem;
}
.font-tools .mantine-Group-root {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
}
.font-tools .mantine-Button-root {
color: #fa5252;
font-weight: 600;
padding: 5px 18px;
border-radius: .25rem;
cursor: pointer;
transition: all .25s;
font-size: 15px;
}
.font-tools .mantine-Button-root:hover {
background-color: #fa52521f;
}
.font-tools #webfont-converter > .mantine-UnstyledButton-root {
background-color: #625bf8;
height: 42px;
}
.font-tools .mantine-Table-table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: none;
font-size: 0.875rem;
}
.font-tools .mantine-Table-table thead,
.font-tools .mantine-Table-table tr {
border-bottom: 1px solid #dee2e6;
}
.font-tools .mantine-Table-table td,
.font-tools .mantine-Table-table th {
padding: 0.4375rem 0.625rem;
text-align: left;
}
.font-tools .mantine-Table-table td {
}
.font-tools .mantine-Table-table tr:last-child {
border-bottom: none;
}
.font-tools .mantine-Checkbox-body {
display: flex;
align-items: center;
}
.font-tools .mantine-Checkbox-label {
padding-inline-start: .75rem;
font-size: .875rem;
}
.font-tools .mantine-Checkbox-input {
background-color: #fff;
border: 1px solid #ced4da;
appearance: none;
width: 20px;
height: 20px;
border-radius: 0.25rem;
transition: border-color .1s, background-color .1s;
display: block;
}
.font-tools .mantine-Checkbox-body svg {
width: 60%;
color: #fff;
pointer-events: none;
transform: translateY(.3125rem) scale(.5);
opacity: 0;
margin: auto;
transition: transform .1s, opacity .1s;
position: absolute;
inset: 0;
}
.font-tools .mantine-Group-root.list-extensions {
justify-content: flex-start;
}
.font-tools .mantine-Checkbox-input:checked {
background-color: #625bf8;
border-color: #625bf8;
}
.font-tools .mantine-Checkbox-inner {
position: relative;
}
.font-tools .mantine-Checkbox-input:checked + svg {
opacity: 1;
transform: none;
}
.font-tools .mantine-Button-inner {
display: flex;
justify-content: center;
gap: 10px;
align-items: center;
}
.font-tools .mantine-Button-inner .mantine-Button-section {
color: #fff;
}
.font-tools #webfont-converter > .mantine-UnstyledButton-root .mantine-Button-label {
color: #fff;
}
.font-tools #webfont-converter > .mantine-UnstyledButton-root:focus,
.font-tools #webfont-converter > .mantine-UnstyledButton-root:active {
transform: translateY(.0625rem);
}
.font-tools #webfont-converter.waiting,
.font-tools #webfont-converter.waiting *,
.font-tools #webfont-converter.waiting form {
pointer-events: none;
}
.font-tools #webfont-converter.no-file > .mantine-UnstyledButton-root,
.font-tools #webfont-converter.waiting .mantine-Button-root,
.font-tools #webfont-converter.waiting > .mantine-UnstyledButton-root {
cursor: not-allowed;
color: #fff;
background: #adb5bd;
border: 1px solid #0000;
transform: none;
pointer-events: none;
}
.font-tools #webfont-converter:not(.has-converted) button.download-all,
.font-tools #webfont-converter:not(.has-converted) .result-area,
.font-tools #webfont-converter.no-file button.download-all,
.font-tools #webfont-converter.no-file .result-area,
.font-tools .result-template,
.font-tools .table-template {
display: none;
}
.font-tools #webfont-converter.no-file .file-details {
display: none;
}
#font-changer-container .font-output:not([data-alphabet="emoji"]) {
font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Arial Unicode MS', sans-serif;
}
#font-changer-container h2 {
font-size: 1.1em;
font-family: var(--font-mono), sans-serif;
}
#font-changer-container .card-body p {
font-weight: 500;
}
#frequency-stats > * {
display: inline-grid;
place-items: center;
min-width: 90px;
overflow: hidden;
}
#frequency-stats[data-group-size="2"] > * {
min-width: 120px;
}
#frequency-stats[data-group-size="3"] > * {
min-width: 144px;
}
.font-tools .alert {
box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));
}
#morse-code-translator .grid.swapped #input-container {
order: 2;
}
#morse-code-translator .grid.swapped #output-container {
order: 1;
}
#binary-translator #input-1 {
font-family: Consolas, "Courier New", monospace;
white-space: pre-wrap;
word-break: break-word;
}
.font-tools .drawer-content main h1 {
line-height: 1.5;
margin-bottom: 30px;
}
.admin-bar .font-tools .sticky {
top: 32px;
}
.font-tools #fonts-input input {
display: block;
}
.font-tools .drawer-side.toggled,
:where(.drawer-toggle:checked~.drawer-side) {
pointer-events: auto;
visibility: visible;
opacity: 1;
overflow-y: auto;
}
.font-tools .drawer-side.toggled aside {
translate: 0;
}
.font-tools .drawer-side ul {
margin: 0;
padding: 10px;
}
.font-tools .drawer-side li a {
text-decoration: none;
}
.font-tools .drawer-side li.current_page_item > a,
.font-tools .drawer-side li.current-menu-item > a,
.font-tools .drawer-side li a.menu-active {
color: #fff;
background-color: var(--menu-active-bg);
}
.admin-bar .font-tools .drawer-side {
top: 32px;
height: calc(100dvh - 32px);
}
.font-tools .drawer-side.toggled,
.font-tools .drawer-side {
}
.font-tools footer.footer {
margin-top: 30px;
}
.font-tools .drawer-side aside > * + * > *:first-child {
border-top: 1px solid #eee;
}
.font-tools .footer .widget ul li a {
padding-left: 0;
padding-right: 0;
text-decoration: none;
}
.font-tools .footer a {
text-decoration: none;
}
.font-tools .footer a:hover,
.font-tools .footer .widget ul li a:hover {
text-decoration: underline;
background-color: transparent;
}
.font-tools .footer .widget_polylang select {
background: #fff;
padding: 3px;
border-radius: 3px;
border: 1px solid #ddd;
}
.font-tools .footer ul.footer-menu,
.font-tools .footer .widget ul,
.font-tools .drawer-side .widget ul {
padding: 0;
}
.font-tools .footer ul.footer-menu li:first-child,
.font-tools .footer ul.footer-menu li:first-child a {
padding-left: 0;
}
.font-tools .drawer-content > .navbar {
justify-content: center;
display: flex;
}
.font-tools main fieldset {
border: none;
padding: 0;
margin: 0;
}
.font-tools .drawer-content > .navbar h1 {
margin: 0;
} @media only screen and (max-width: 782px) {
.admin-bar .font-tools .drawer-side {
top: 46px;
height: calc(100dvh - 46px);
}
.font-tools .navbar-center h1 {
font-size: 30px;
line-height: 46px;
}
.font-tools #font-dropzone .mantine-Group-root {
width: 50%;
}
}
@media only screen and (max-width: 660px) {
.font-tools #font-dropzone .mantine-Group-root {
width: 60%;
}
}
@media only screen and (max-width: 480px) {
.font-tools .navbar-center h1 {
font-size: 25px;
line-height: 36px;
}
.font-tools #font-dropzone .mantine-Group-root {
width: 78%;
}
}