704 lines
18 KiB
CSS
704 lines
18 KiB
CSS
/* ==========================================================================
|
|
Wiki.js Custom Theme - Profice Corporate Design
|
|
Optimized CSS Injection with Light/Dark Mode Support
|
|
========================================================================== */
|
|
|
|
/* ===== CSS VARIABLES - LIGHT MODE (Default) ===== */
|
|
:root {
|
|
/* Core Colors */
|
|
--pf-bg-body: #F7F7F0;
|
|
--pf-bg-content: #FFFFFF;
|
|
--pf-bg-sidebar: #4F4747;
|
|
--pf-bg-header: #4F4747;
|
|
|
|
/* Text Colors */
|
|
--pf-text-primary: #4F4747;
|
|
--pf-text-secondary: #6B6363;
|
|
--pf-text-muted: #8A8A7A;
|
|
--pf-text-inverse: #F7F7F0;
|
|
|
|
/* Accent Colors */
|
|
--pf-accent-teal: #5A9E96;
|
|
--pf-accent-teal-hover: #4A8E86;
|
|
--pf-accent-orange: #D4864A;
|
|
--pf-accent-green: #7FB882;
|
|
|
|
/* UI Elements */
|
|
--pf-border-light: rgba(79, 71, 71, 0.1);
|
|
--pf-border-medium: rgba(79, 71, 71, 0.2);
|
|
--pf-shadow-soft: 0 2px 12px rgba(79, 71, 71, 0.08);
|
|
--pf-shadow-medium: 0 4px 20px rgba(79, 71, 71, 0.12);
|
|
--pf-shadow-card: 0 1px 3px rgba(79, 71, 71, 0.06), 0 4px 16px rgba(79, 71, 71, 0.06);
|
|
|
|
/* Transitions */
|
|
--pf-transition: 0.2s ease;
|
|
--pf-transition-slow: 0.3s ease;
|
|
|
|
/* Spacing */
|
|
--pf-radius-sm: 6px;
|
|
--pf-radius-md: 10px;
|
|
--pf-radius-lg: 16px;
|
|
--pf-radius-pill: 50px;
|
|
}
|
|
|
|
/* ===== CSS VARIABLES - DARK MODE ===== */
|
|
.theme--dark,
|
|
[data-theme="dark"],
|
|
.dark-mode {
|
|
--pf-bg-body: #1E1E1E;
|
|
--pf-bg-content: #2D2D2D;
|
|
--pf-bg-sidebar: #252525;
|
|
--pf-bg-header: #252525;
|
|
|
|
--pf-text-primary: #E8E8E8;
|
|
--pf-text-secondary: #B0B0B0;
|
|
--pf-text-muted: #888888;
|
|
--pf-text-inverse: #1E1E1E;
|
|
|
|
--pf-border-light: rgba(255, 255, 255, 0.08);
|
|
--pf-border-medium: rgba(255, 255, 255, 0.15);
|
|
--pf-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.3);
|
|
--pf-shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
--pf-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* ===== GLOBAL RESET & BASE ===== */
|
|
body {
|
|
background-color: var(--pf-bg-body) !important;
|
|
color: var(--pf-text-primary) !important;
|
|
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* ===== HEADER / APP BAR ===== */
|
|
header,
|
|
.v-app-bar,
|
|
.v-toolbar,
|
|
.application--wrap > header {
|
|
background-color: var(--pf-bg-header) !important;
|
|
border-bottom: none !important;
|
|
box-shadow: var(--pf-shadow-soft) !important;
|
|
}
|
|
|
|
.v-toolbar__content {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Header elements */
|
|
.v-app-bar .v-toolbar__title,
|
|
.v-toolbar__title,
|
|
header .v-btn,
|
|
header .v-icon,
|
|
.v-app-bar .v-icon {
|
|
color: var(--pf-text-inverse) !important;
|
|
}
|
|
|
|
/* Header buttons - clean circular style */
|
|
header .v-btn,
|
|
.v-app-bar .v-btn {
|
|
background: rgba(255, 255, 255, 0.1) !important;
|
|
border-radius: 50% !important;
|
|
box-shadow: none !important;
|
|
min-width: 40px !important;
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
padding: 0 !important;
|
|
transition: var(--pf-transition) !important;
|
|
}
|
|
|
|
header .v-btn:hover,
|
|
.v-app-bar .v-btn:hover {
|
|
background: rgba(255, 255, 255, 0.2) !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* ===== SEARCH BAR - Clean Pill Style ===== */
|
|
.v-app-bar .v-text-field,
|
|
header .search-box,
|
|
.v-toolbar .v-input,
|
|
.v-app-bar .v-input {
|
|
background: rgba(255, 255, 255, 0.12) !important;
|
|
border: none !important;
|
|
border-radius: var(--pf-radius-pill) !important;
|
|
box-shadow: none !important;
|
|
max-width: 400px !important;
|
|
}
|
|
|
|
.v-app-bar .v-text-field input,
|
|
.v-app-bar .v-input input {
|
|
color: var(--pf-text-inverse) !important;
|
|
padding: 8px 16px !important;
|
|
}
|
|
|
|
.v-app-bar .v-text-field input::placeholder,
|
|
.v-app-bar .v-input input::placeholder {
|
|
color: rgba(255, 255, 255, 0.5) !important;
|
|
}
|
|
|
|
/* Remove search field underlines and outlines */
|
|
.v-app-bar .v-text-field .v-input__slot::before,
|
|
.v-app-bar .v-text-field .v-input__slot::after,
|
|
.v-app-bar .v-input .v-input__slot::before,
|
|
.v-app-bar .v-input .v-input__slot::after {
|
|
display: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.v-app-bar .v-text-field .v-input__slot,
|
|
.v-app-bar .v-input .v-input__slot {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.v-app-bar .v-text-field.v-input--is-focused .v-input__slot,
|
|
.v-app-bar .v-input.v-input--is-focused .v-input__slot {
|
|
background: rgba(255, 255, 255, 0.18) !important;
|
|
}
|
|
|
|
/* ===== SIDEBAR / NAVIGATION DRAWER ===== */
|
|
.v-navigation-drawer,
|
|
.v-navigation-drawer__content {
|
|
background-color: var(--pf-bg-sidebar) !important;
|
|
border-right: none !important;
|
|
}
|
|
|
|
/* Sidebar text */
|
|
.v-navigation-drawer .v-list-item__title,
|
|
.v-navigation-drawer .v-list-item__subtitle,
|
|
.v-navigation-drawer .v-icon {
|
|
color: var(--pf-text-inverse) !important;
|
|
}
|
|
|
|
/* Sidebar navigation items */
|
|
.v-navigation-drawer .v-list-item {
|
|
margin: 4px 8px !important;
|
|
border-radius: var(--pf-radius-sm) !important;
|
|
transition: var(--pf-transition) !important;
|
|
border: none !important;
|
|
min-height: 40px !important;
|
|
}
|
|
|
|
.v-navigation-drawer .v-list-item:hover {
|
|
background: rgba(255, 255, 255, 0.08) !important;
|
|
}
|
|
|
|
/* Active sidebar item - subtle highlight, no thick border */
|
|
.v-navigation-drawer .v-list-item--active,
|
|
.v-navigation-drawer .v-list-item.v-list-item--active {
|
|
background: rgba(90, 158, 150, 0.25) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.v-navigation-drawer .v-list-item--active .v-list-item__title,
|
|
.v-navigation-drawer .v-list-item--active .v-icon {
|
|
color: #FFFFFF !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
/* Sidebar section headers */
|
|
.v-navigation-drawer .v-subheader {
|
|
color: var(--pf-accent-orange) !important;
|
|
font-size: 11px !important;
|
|
font-weight: 700 !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.5px !important;
|
|
}
|
|
|
|
/* ===== MAIN CONTENT AREA ===== */
|
|
main,
|
|
.v-main,
|
|
.v-main__wrap {
|
|
background-color: var(--pf-bg-body) !important;
|
|
}
|
|
|
|
/* Content container - Clean white card */
|
|
.container,
|
|
.v-container,
|
|
.page-col-content,
|
|
.contents {
|
|
background: var(--pf-bg-content) !important;
|
|
border-radius: var(--pf-radius-lg) !important;
|
|
box-shadow: var(--pf-shadow-card) !important;
|
|
padding: 32px !important;
|
|
margin: 24px !important;
|
|
border: 1px solid var(--pf-border-light) !important;
|
|
}
|
|
|
|
/* Remove any glass morphism / backdrop filter */
|
|
.container,
|
|
.v-container,
|
|
.page-col-content,
|
|
.contents {
|
|
backdrop-filter: none !important;
|
|
-webkit-backdrop-filter: none !important;
|
|
}
|
|
|
|
/* ===== BREADCRUMBS ===== */
|
|
.v-breadcrumbs {
|
|
background: transparent !important;
|
|
padding: 8px 0 16px 0 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.v-breadcrumbs__item,
|
|
.v-breadcrumbs a {
|
|
color: var(--pf-text-muted) !important;
|
|
font-size: 13px !important;
|
|
text-decoration: none !important;
|
|
transition: var(--pf-transition) !important;
|
|
}
|
|
|
|
.v-breadcrumbs a:hover {
|
|
color: var(--pf-accent-teal) !important;
|
|
}
|
|
|
|
.v-breadcrumbs__divider {
|
|
color: var(--pf-text-muted) !important;
|
|
padding: 0 8px !important;
|
|
}
|
|
|
|
/* ===== TYPOGRAPHY ===== */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--pf-text-primary) !important;
|
|
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
|
|
font-weight: 600 !important;
|
|
line-height: 1.3 !important;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem !important;
|
|
margin-bottom: 20px !important;
|
|
padding-bottom: 12px !important;
|
|
border-bottom: 2px solid var(--pf-accent-teal) !important;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem !important;
|
|
margin-top: 32px !important;
|
|
margin-bottom: 16px !important;
|
|
color: var(--pf-text-primary) !important;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.25rem !important;
|
|
color: var(--pf-accent-teal) !important;
|
|
margin-top: 24px !important;
|
|
margin-bottom: 12px !important;
|
|
}
|
|
|
|
p {
|
|
color: var(--pf-text-secondary) !important;
|
|
line-height: 1.7 !important;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
|
|
a {
|
|
color: var(--pf-accent-teal) !important;
|
|
text-decoration: none !important;
|
|
transition: var(--pf-transition) !important;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--pf-accent-teal-hover) !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
/* ===== BUTTONS - Standardized Teal Gradient ===== */
|
|
.v-btn,
|
|
button:not(.v-app-bar .v-btn),
|
|
input[type="submit"],
|
|
input[type="button"] {
|
|
background: linear-gradient(135deg, var(--pf-accent-teal), var(--pf-accent-green)) !important;
|
|
color: #FFFFFF !important;
|
|
border: none !important;
|
|
border-radius: var(--pf-radius-md) !important;
|
|
padding: 10px 20px !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
text-transform: none !important;
|
|
letter-spacing: 0 !important;
|
|
box-shadow: 0 2px 8px rgba(90, 158, 150, 0.3) !important;
|
|
transition: var(--pf-transition) !important;
|
|
}
|
|
|
|
.v-btn:hover,
|
|
button:not(.v-app-bar .v-btn):hover,
|
|
input[type="submit"]:hover,
|
|
input[type="button"]:hover {
|
|
box-shadow: 0 4px 16px rgba(90, 158, 150, 0.4) !important;
|
|
transform: translateY(-1px) !important;
|
|
}
|
|
|
|
/* Secondary / Outlined buttons */
|
|
.v-btn--outlined {
|
|
background: transparent !important;
|
|
color: var(--pf-text-primary) !important;
|
|
border: 2px solid var(--pf-border-medium) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.v-btn--outlined:hover {
|
|
background: var(--pf-bg-body) !important;
|
|
border-color: var(--pf-accent-teal) !important;
|
|
color: var(--pf-accent-teal) !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Icon buttons in content area */
|
|
.v-btn--icon {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.v-btn--icon:hover {
|
|
background: var(--pf-border-light) !important;
|
|
}
|
|
|
|
/* ===== CARDS ===== */
|
|
.v-card {
|
|
background: var(--pf-bg-content) !important;
|
|
border-radius: var(--pf-radius-md) !important;
|
|
box-shadow: var(--pf-shadow-card) !important;
|
|
border: 1px solid var(--pf-border-light) !important;
|
|
transition: var(--pf-transition-slow) !important;
|
|
overflow: hidden !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
.v-card:hover {
|
|
box-shadow: var(--pf-shadow-medium) !important;
|
|
transform: none !important;
|
|
border-color: var(--pf-border-medium) !important;
|
|
}
|
|
|
|
/* Remove the top gradient bar from cards */
|
|
.v-card::before {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ===== FORMS & INPUTS ===== */
|
|
.v-text-field .v-input__slot,
|
|
.v-input .v-input__slot,
|
|
input:not([type="submit"]):not([type="button"]),
|
|
textarea,
|
|
select {
|
|
background: var(--pf-bg-body) !important;
|
|
border: 1px solid var(--pf-border-medium) !important;
|
|
border-radius: var(--pf-radius-sm) !important;
|
|
transition: var(--pf-transition) !important;
|
|
}
|
|
|
|
.v-text-field.v-input--is-focused .v-input__slot,
|
|
.v-input.v-input--is-focused .v-input__slot,
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--pf-accent-teal) !important;
|
|
box-shadow: 0 0 0 3px rgba(90, 158, 150, 0.15) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* ===== CODE BLOCKS ===== */
|
|
pre,
|
|
code {
|
|
font-family: 'Consolas', 'Monaco', 'Fira Code', monospace !important;
|
|
}
|
|
|
|
pre {
|
|
background: #2D2D2D !important;
|
|
color: #E8E8E8 !important;
|
|
border-radius: var(--pf-radius-md) !important;
|
|
padding: 20px !important;
|
|
margin: 16px 0 !important;
|
|
border-left: 4px solid var(--pf-accent-teal) !important;
|
|
overflow-x: auto !important;
|
|
}
|
|
|
|
code:not(pre code) {
|
|
background: rgba(90, 158, 150, 0.1) !important;
|
|
color: var(--pf-accent-teal) !important;
|
|
padding: 2px 6px !important;
|
|
border-radius: 4px !important;
|
|
font-size: 0.9em !important;
|
|
}
|
|
|
|
/* ===== BLOCKQUOTES ===== */
|
|
blockquote {
|
|
background: rgba(90, 158, 150, 0.08) !important;
|
|
border-left: 4px solid var(--pf-accent-teal) !important;
|
|
border-radius: 0 var(--pf-radius-sm) var(--pf-radius-sm) 0 !important;
|
|
padding: 16px 20px !important;
|
|
margin: 16px 0 !important;
|
|
color: var(--pf-text-secondary) !important;
|
|
}
|
|
|
|
/* ===== ALERTS ===== */
|
|
.v-alert {
|
|
border-radius: var(--pf-radius-md) !important;
|
|
padding: 16px 20px !important;
|
|
border: none !important;
|
|
margin: 16px 0 !important;
|
|
}
|
|
|
|
.v-alert.success,
|
|
.v-alert--success {
|
|
background: rgba(127, 184, 130, 0.15) !important;
|
|
border-left: 4px solid var(--pf-accent-green) !important;
|
|
}
|
|
|
|
.v-alert.info,
|
|
.v-alert--info {
|
|
background: rgba(90, 158, 150, 0.15) !important;
|
|
border-left: 4px solid var(--pf-accent-teal) !important;
|
|
}
|
|
|
|
.v-alert.warning,
|
|
.v-alert--warning {
|
|
background: rgba(212, 134, 74, 0.15) !important;
|
|
border-left: 4px solid var(--pf-accent-orange) !important;
|
|
}
|
|
|
|
.v-alert.error,
|
|
.v-alert--error {
|
|
background: rgba(220, 80, 80, 0.15) !important;
|
|
border-left: 4px solid #DC5050 !important;
|
|
}
|
|
|
|
/* ===== TABLES ===== */
|
|
table {
|
|
width: 100% !important;
|
|
border-collapse: collapse !important;
|
|
border-radius: var(--pf-radius-md) !important;
|
|
overflow: hidden !important;
|
|
box-shadow: var(--pf-shadow-soft) !important;
|
|
margin: 16px 0 !important;
|
|
}
|
|
|
|
table th {
|
|
background: var(--pf-bg-sidebar) !important;
|
|
color: var(--pf-text-inverse) !important;
|
|
font-weight: 600 !important;
|
|
padding: 14px 16px !important;
|
|
text-align: left !important;
|
|
}
|
|
|
|
table td {
|
|
padding: 12px 16px !important;
|
|
border-bottom: 1px solid var(--pf-border-light) !important;
|
|
color: var(--pf-text-secondary) !important;
|
|
}
|
|
|
|
table tr:hover td {
|
|
background: rgba(90, 158, 150, 0.04) !important;
|
|
}
|
|
|
|
/* ===== TAGS / CHIPS ===== */
|
|
.v-chip {
|
|
background: linear-gradient(135deg, var(--pf-accent-teal), var(--pf-accent-green)) !important;
|
|
color: #FFFFFF !important;
|
|
border-radius: var(--pf-radius-pill) !important;
|
|
font-size: 12px !important;
|
|
font-weight: 500 !important;
|
|
padding: 4px 12px !important;
|
|
}
|
|
|
|
/* ===== DIALOGS / MODALS ===== */
|
|
.v-dialog {
|
|
border-radius: var(--pf-radius-lg) !important;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.v-dialog .v-card {
|
|
border-radius: var(--pf-radius-lg) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* ===== TOOLTIPS ===== */
|
|
.v-tooltip__content {
|
|
background: var(--pf-bg-sidebar) !important;
|
|
color: var(--pf-text-inverse) !important;
|
|
border-radius: var(--pf-radius-sm) !important;
|
|
padding: 8px 12px !important;
|
|
font-size: 13px !important;
|
|
box-shadow: var(--pf-shadow-medium) !important;
|
|
}
|
|
|
|
/* ===== SCROLLBAR ===== */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--pf-bg-body);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--pf-text-muted);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--pf-text-secondary);
|
|
}
|
|
|
|
/* ===== SELECTION ===== */
|
|
::selection {
|
|
background: var(--pf-accent-teal);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* ===== WIKI.JS SPECIFIC FIXES ===== */
|
|
|
|
/* Page title styling */
|
|
.page-header h1,
|
|
.contents > h1:first-child {
|
|
font-size: 2rem !important;
|
|
color: var(--pf-text-primary) !important;
|
|
border-bottom: 2px solid var(--pf-accent-teal) !important;
|
|
padding-bottom: 12px !important;
|
|
margin-bottom: 24px !important;
|
|
}
|
|
|
|
/* Sidebar tree view */
|
|
.v-treeview {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.v-treeview-node__root {
|
|
border-radius: var(--pf-radius-sm) !important;
|
|
margin: 2px 0 !important;
|
|
}
|
|
|
|
.v-treeview-node__root:hover {
|
|
background: rgba(255, 255, 255, 0.06) !important;
|
|
}
|
|
|
|
/* Comments section */
|
|
.comments-container {
|
|
background: var(--pf-bg-content) !important;
|
|
border-radius: var(--pf-radius-md) !important;
|
|
padding: 20px !important;
|
|
border: 1px solid var(--pf-border-light) !important;
|
|
}
|
|
|
|
/* Editor */
|
|
.editor,
|
|
.ProseMirror,
|
|
.CodeMirror {
|
|
background: var(--pf-bg-content) !important;
|
|
border-radius: var(--pf-radius-md) !important;
|
|
border: 1px solid var(--pf-border-medium) !important;
|
|
}
|
|
|
|
.editor:focus-within,
|
|
.ProseMirror:focus,
|
|
.CodeMirror-focused {
|
|
border-color: var(--pf-accent-teal) !important;
|
|
box-shadow: 0 0 0 3px rgba(90, 158, 150, 0.15) !important;
|
|
}
|
|
|
|
/* Page info sidebar cards */
|
|
.page-col-sd .v-card {
|
|
background: var(--pf-bg-content) !important;
|
|
border: 1px solid var(--pf-border-light) !important;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
|
|
/* Dividers */
|
|
hr,
|
|
.v-divider {
|
|
border-color: var(--pf-border-light) !important;
|
|
margin: 24px 0 !important;
|
|
}
|
|
|
|
/* Lists */
|
|
ul, ol {
|
|
padding-left: 24px !important;
|
|
margin: 12px 0 !important;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 8px !important;
|
|
color: var(--pf-text-secondary) !important;
|
|
}
|
|
|
|
li::marker {
|
|
color: var(--pf-accent-teal) !important;
|
|
}
|
|
|
|
/* Images */
|
|
.contents img {
|
|
border-radius: var(--pf-radius-md) !important;
|
|
box-shadow: var(--pf-shadow-soft) !important;
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
/* Loading states */
|
|
.v-progress-circular {
|
|
color: var(--pf-accent-teal) !important;
|
|
}
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
@media (max-width: 960px) {
|
|
.container,
|
|
.v-container,
|
|
.page-col-content,
|
|
.contents {
|
|
padding: 20px !important;
|
|
margin: 12px !important;
|
|
border-radius: var(--pf-radius-md) !important;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.75rem !important;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.35rem !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.container,
|
|
.v-container,
|
|
.page-col-content,
|
|
.contents {
|
|
padding: 16px !important;
|
|
margin: 8px !important;
|
|
}
|
|
|
|
.v-btn {
|
|
padding: 8px 16px !important;
|
|
font-size: 13px !important;
|
|
}
|
|
}
|
|
|
|
/* ===== PRINT ===== */
|
|
@media print {
|
|
header,
|
|
.v-app-bar,
|
|
.v-navigation-drawer,
|
|
footer {
|
|
display: none !important;
|
|
}
|
|
|
|
body {
|
|
background: #FFFFFF !important;
|
|
}
|
|
|
|
.container,
|
|
.v-container {
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
}
|