diff options
Diffstat (limited to 'website2/public/assets/css/tc.css')
-rw-r--r-- | website2/public/assets/css/tc.css | 452 |
1 files changed, 452 insertions, 0 deletions
diff --git a/website2/public/assets/css/tc.css b/website2/public/assets/css/tc.css new file mode 100644 index 0000000..b2b32fc --- /dev/null +++ b/website2/public/assets/css/tc.css @@ -0,0 +1,452 @@ +html, body { + height: 100%; + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #FFFFFF; + color: #000000; + display: flex; + flex-direction: column; + overflow-x: hidden; +} + +header { + text-align: center; + background-color: #FFFFFF; + color: #FFFFFF; + display: flex; + flex-direction: column; + align-items: center; +} + +.header-content { + display: flex; + align-items: center; + justify-content: center; + background-color: #FFFFFF; + padding: 10px 20px; + padding-top: 15px; +} + +header h1 { + margin: 0; + font-size: 24px; + margin-left: 10px; + color: #D22627; +} + +header h2 { + margin: 5px 0 0 0; + font-size: 16px; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); +} + +.logo { + height: 40px; + width: auto; +} + +.container { + flex: 1; + display: flex; + width: 100%; + min-width: 300px; + align-items: flex-start; + flex-wrap: wrap; + margin: 20px auto; + margin-top: 0px; + margin-bottom: 0px; + max-width: 1200px; +} + +.sidebar, .sidebar-right { + width: 20%; min-width: 200px; max-width: 250px; + padding: 10px; + padding-bottom: 0px; + background-color: #FFEEEE; + border: 1px solid #D22627; + box-sizing: border-box; + display: block; align-self: flex-start; +} + +.content { + width: 60%; + flex-grow: 1; + padding: 10px; + box-sizing: border-box; +} + +.box { + margin-bottom: 10px; + padding: 10px; + border: 1px solid #D22627; + background-color: #FFFFFF; +} + +.box-last { + margin-bottom: 0px; +} + +.box h3 { + margin: 0 0 10px 0; + font-size: 16px; + color: #D22627; +} + +.box p, .box a { + margin: 5px 0; + font-size: 14px; + color: #000000; +} + +.box a { + color: #D22627; + text-decoration: none; +} + +.box a:hover { + text-decoration: underline; +} + +footer { + background-color: #D22627; + color: #FFFFFF; + text-align: center; + padding: 10px 0; + font-size: 14px; + width: 100%; + flex-shrink: 0; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #D22627; + padding: 10px; + color: #FFFFFF; +} + +.navbar-left, .navbar-center, .navbar-right { + display: flex; + align-items: center; +} + +.navbar-left { + justify-content: flex-start; + flex: 1; +} + +.navbar-center { + justify-content: center; + flex-grow: 1; + flex: 2; +} + +.navbar-right { + justify-content: flex-end; + flex: 1; +} + +.navbar a, .navbar span, .navbar input, .navbar img { + margin: 0 10px; + color: #FFFFFF; + text-decoration: none; +} + +.navbar button { + margin: 0 10px; + color: #000000; + text-decoration: none; +} + +.navbar a:hover, .navbar button:hover { + text-decoration: underline; +} + +.navbar-logo { + height: 40px; + width: auto; +} + +.navbar-dropdown { + position: relative; + color: #ffffff; + display: inline-block; +} + +.navbar-dropbtn { + background-color: #D22627; + color: white; + border: none; + cursor: pointer; +} + +.navbar-dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +.navbar-dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.navbar-dropdown-content a:hover { + background-color: #f1f1f1; +} + +.navbar-dropdown:hover .navbar-dropdown-content { + display: block; +} + +.navbar-dropdown:hover .navbar-dropbtn { + background-color: #a10000; +} + +.mobile-navbar { + display: flex; + flex-direction: column; + align-items: center; + background-color: #D22627; + color: #FFFFFF; + width: 100%; + padding: 10px; +} + +.mobile-navbar-panel { + display: flex; + flex-direction: column; + align-items: flex-start; + background-color: #D22627; + color: #FFFFFF; + width: 100%; + padding: 10px; + gap: 10px; +} + +.mobile-navbar-panel .navbar-header { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; +} + +.mobile-navbar-panel .navbar-logo, .mobile-navbar-panel .navbar-title { + display: inline-block; + vertical-align: middle; +} + +.mobile-navbar-panel .navbar-toggle { + display: inline-block; + cursor: pointer; +} + +.mobile-navbar-panel .navbar-toggle::after { + content: ' ▼'; +} + +.mobile-navbar-menu { + display: flex; + flex-direction: column; + width: 100%; + background-color: #D22627; + text-align: center; + align-items: center; + padding: 10px; + box-sizing: border-box; +} + +.mobile-navbar-menu a, +.mobile-navbar-menu span, +.mobile-navbar-menu input, +.mobile-navbar-menu button { + display: block; + padding: 10px; + border-bottom: 1px solid #FFFFFF; + text-align: center; + width: 80vw; + box-sizing: border-box; + margin: 0; +} + +.mobile-navbar-menu a:hover, +.mobile-navbar-menu button:hover { + background-color: #a10000; +} + +.mobile-navbar-menu button { + text-align: center; + width: 80vw; + margin: 0 auto; + display: block; +} + +input[type="checkbox"] { + display: none; +} + +input[type="checkbox"]:checked ~ .mobile-navbar-items { + display: block; +} + +@media screen and (max-width: 1279px) { + .container { + flex-direction: column; + padding: 10px; + padding-top: 0px; + padding-bottom: 0px; + width: 100%; + min-width: auto; + box-sizing: border-box; + } + + .sidebar, .sidebar-right, .content { + width: 100%; + min-width: auto; + max-width: none; + flex-grow: 0; + margin-bottom: 20px; + } + + .header-content { + padding-top: 10px; + } + + header h1 { + font-size: 20px; + } + + header h2 { + font-size: 14px; + } + + .box h3 { + font-size: 16px; + } + + .box p, .box a { + font-size: 12px; + } + + footer { + font-size: 12px; + padding: 5px; + } + + .navbar { + display: none; + } + + .mobile-navbar { + display: flex; + flex-direction: column; + align-items: center; + background-color: #D22627; + padding: 10px; + color: #FFFFFF; + width: 100%; + } + + .mobile-navbar .navbar-header { + display: flex; + justify-content: space-between; + width: 100%; + align-items: center; + } + + .mobile-navbar .navbar-logo, .mobile-navbar .navbar-title { + display: inline-block; + vertical-align: middle; + } + + .mobile-navbar .navbar-toggle { + display: inline-block; + cursor: pointer; + } + + .mobile-navbar .navbar-toggle::after { + content: ' ▼'; + } + + .mobile-navbar-items { + display: flex; + flex-direction: column; + width: 100%; + background-color: #D22627; + text-align: center; + align-items: center; + } + + .mobile-navbar-items a, + .mobile-navbar-items span, + .mobile-navbar-items input, + .mobile-navbar-items button { + display: block; + padding: 10px; + border-bottom: 1px solid #FFFFFF; + text-align: center; + width: 80vw; + box-sizing: border-box; + margin: 0; + } + + .mobile-navbar-items a:hover, + .mobile-navbar-items button:hover { + background-color: #3e8e41; + } + + .mobile-navbar-items button { + text-align: center; + width: 80vw; + margin: 0 auto; + display: block; + } + + input[type="checkbox"] { + display: none; + } + + input[type="checkbox"]:checked ~ .mobile-navbar-items { + display: block; + } +} + +@media screen and (min-width: 1280px) { + .container { + width: 100%; + min-width: 300px; + } + + .sidebar, .sidebar-right { + width: 20%; + min-width: 200px; + max-width: 250px; + } + + .content { + width: 60%; + flex-grow: 1; + } + + .mobile-navbar, .mobile-navbar-panel, .mobile-navbar-menu { + display: none; + } +} + +.breadcrumbs { + margin-bottom: 10px; + padding: 10px; + border: 1px solid #D22627; + background-color: #FFFFFF; +} + +.sidebar a.active, .sidebar-right a.active { + text-decoration: underline; +}
\ No newline at end of file |