관리-도구
편집 파일: _theme.scss
@use '../utils' as *; /*----------------------------------------------------------------------------------- Template Name: Interno – Architecture & Interior HTML Template Author: Theme_Pure Support: https://help.themepure.net/support/ Description: Interno – Architecture & Interior HTML Template Version: 1.0 ----------------------------------------------------------------------------------- /************ TABLE OF CONTENTS *************** ----------------- 01. THEME CSS ----------------- 1.1 Theme Default 1.2 Common Classes 1.3 Default Spacing ----------------- 02. COMPONENTS css ----------------- 2.1 Back to top 2.2 Theme Settings 2.3 Buttons 2.4 Animations 2.5 Preloader 2.6 Background 2.7 Carousel 2.8 Nice Select 2.9 Pagination 2.10 Offcanvas 2.11 Breadcrumb 2.12 Accordion 2.13 Tab 2.14 Modal 2.15 Section Title 2.16 Search 2.17 Hotspot 2.18 Ragne Slider ----------------- 03. HEADER CSS ----------------- 3.1 Header Style 1 3.2 Header Style 2 --------------------------------- 04. MENU CSS --------------------------------- 4.1 Main menu css --------------------------------- 05. BLOG CSS --------------------------------- 5.1 Blog css 5.2 Postbox css 5.3 Recent Post css 5.4 Sidebar css --------------------------------- 06. FOOTER CSS --------------------------------- 6.1 Footer Style 1 --------------------------------- 07. PAGES CSS --------------------------------- 7.1 about css start 7.2 appointment css start 7.3 cart css start 7.4 checkout css start 7.5 contact css start 7.6 error css start 7.7 feature css start 7.8 funfact css start 7.9 gallery css start 7.10 hero css start 7.11 newsletter css 7.12 price css start 7.13 product css start 7.14 progress css start 7.15 project css start 7.16 service css start 7.17 slider css start 7.18 team css start 7.19 testimonial css start **********************************************/ /*----------------------------------------*/ /* 1.1 Theme Default /*----------------------------------------*/ .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1320px; } .custom-container-1 { max-width: 1830px; } .custom-container-2 { max-width: 1650px; } .custom-container-3 { max-width: 1870px; } .custom-container-4 { max-width: 1750px; } @import url($font-url); *{ margin: 0; padding: 0; box-sizing: border-box; } /*--------------------------------- typography css start ---------------------------------*/ body { font-family: var(--tp-ff-body); font-size: 16px; font-weight: normal; color: var(--tp-text-body); line-height: 30px; } a{ text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--tp-ff-heading); color: var(--tp-common-black); margin-top: 0px; font-weight: 700; line-height: 1.2; @include transition(color); } h1 { font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 16px; } ul { margin: 0px; padding: 0px; } p { font-family: var(--tp-ff-p); color: var(--tp-text-body); font-weight: 400; font-size: 16px; line-height:26px; margin-bottom: 15px; } img { max-width: 100%; } a, button, p, input, select, textarea, li, .transition-3{ @extend %transition; } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover{ color: inherit; text-decoration: none; } a, button { color: inherit; outline: none; border: none; background: transparent; } button:hover{ cursor: pointer; } button:focus{ outline: 0; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], textarea{ outline: none; height: 65px; width: 100%; background-color: transparent; line-height: 65px; font-size: 16px; font-family: var(--tp-ff-heading); color: var(--tp-common-black); padding-left: 20px; padding-right: 20px; border: 1px solid transparent; resize: none; @include placeholder{ color: var(--tp-common-black); } @include rtl{ text-align: right; } &:focus{ border-color: var(--tp-theme-1); &::placeholder{ opacity: 0; } } } textarea{ line-height: 1.4; padding-top: 20px; padding-bottom: 17px; } input[type="color"] { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; height: 100%; width: 100%; padding: 0; border-radius: 50%; } *::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } *::-moz-placeholder { color: var(--tp-common-black); font-size: 14px; opacity: 1; } *::placeholder { color: var(--tp-common-black); font-size: 14px; opacity: 1; } .z-index{ position: relative; z-index: 1; } .z-index-2{ position: relative; z-index: 2; } .z-index-3{ position: relative; z-index: 3; } .z-index-4{ position: relative; z-index: 4; } .z-index-5{ position: relative; z-index: 5; } .z-index-6{ position: relative; z-index: 6; } .z-index-7{ position: relative; z-index: 7; } .z-index-8{ position: relative; z-index: 8; } .z-index-9{ position: relative; z-index: 9; } .gx-5{ --bs-gutter-x: 10px; } .gx-10{ --bs-gutter-x: 10px; } .gx-15{ --bs-gutter-x: 15px; } .gx-20{ --bs-gutter-x: 20px; } .gx-25{ --bs-gutter-x: 25px; } .gx-30{ --bs-gutter-x: 30px; } .gx-35{ --bs-gutter-x: 35px; } .gx-40{ --bs-gutter-x: 40px; } .gx-45{ --bs-gutter-x: 45px; } .gx-50{ --bs-gutter-x: 50px; } .gx-80{ --bs-gutter-x: 80px; }