#body-admin { position: absolute; width: 80vh; height: 55vh; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(60deg, var(--background)); border-radius: 2vh; overflow: hidden; opacity: 0; user-select: none; transition: all .2s ease; } #admin-sidebar { width: 22vh; height: 100%; margin: 0; float: left; background: #FFFFFF09; } #admin-sidebar img { width: auto; height: 4vh; margin: 10% 0 0 10%; float: left; object-fit: contain; } #admin-sidebar #sidebar-title { width: auto; height: 4vh; margin: 9% 0 0 5%; float: left; font-family: 'Calibri', sans-serif; line-height: 2.1vh; } #admin-sidebar #sidebar-title h1 { margin: 0; font-size: 2.5vh; font-weight: bold; color: var(--main); } #admin-sidebar #sidebar-title h2 { width: 100%; margin: 0; font-size: 2.85vh; font-weight: normal; color: #FFF; } #admin-sidebar #sidebar-title h2 span { margin-left: .5vh; font-size: 1.15vh; color: #fff6; } #sidebar-group { width: 80%; height: auto; margin: 1.75vh 0 0 0; padding: 0 10%; float: left; font-size: 1.5vh; line-height: 2.5vh; color: var(--main); } #sidebar-group span { margin-left: 5%; font-family: 'Calibri', sans-serif; font-size: 1.5vh; font-weight: normal; text-transform: uppercase; line-height: 2.5vh; color: #FFFFFF90; } .sidebar-switch { margin: .5vh 0 1.25vh 10% !important; } .sidebar-option { width: 80%; height: 3.5vh; margin: .75vh 10% 0 10%; float: left; background: linear-gradient(to right, #FFFFFF09, #FFFFFF02); color: #FFFFFF90; border-radius: 1vh; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.65vh; font-weight: normal; line-height: 3.5vh; } .sidebar-option i { width: 3.5vh; height: 3.5vh; margin: 0 5% 0 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; transition: all 187ms ease; font-size: 1.5vh; text-align: center; line-height: 3.5vh; filter: drop-shadow(0 0 1vh var(--glow)); } .sidebar-option span { width: 2vh; height: 2vh; margin: .75vh .75vh .75vh 0; float: right; background: #FFFFFF09; color: var(--main); border-radius: 50%; overflow: hidden; font-family: 'Calibri', sans-serif; font-size: 1.25vh; font-weight: normal; text-align: center; line-height: 2vh; filter: drop-shadow(0 0 .25vh var(--main)); } .sidebar-option:not([disabled]):hover { color: var(--main); cursor: pointer; filter: drop-shadow(0 0 1vh var(--glow)); } .sidebar-option-active { color: var(--main); filter: drop-shadow(0 0 1vh var(--glow)); background: #FFFFFF09; transition: all 187ms ease; } .sidebar-option[disabled] { opacity: 0.6; } .sidebar-option[disabled] i { color: #FFFFFF60; } /* ****** ********* ****** */ /* ****** CONTAINER ****** */ /* ****** ********* ****** */ .admin-container { width: 58vh; height: 98%; margin: 0; padding: 0 0 2% 0; float: left; overflow: hidden; } /* ****** LOADING ****** */ #admin-loading { display: none; overflow: hidden; align-items: center; justify-content: center; } .loading-ripple { display: inline-block; position: relative; width: 8vh; height: 8vh; } .loading-ripple div { position: absolute; border: .4vh solid #FFFFFF60; opacity: 1; border-radius: 50%; animation: loading-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .loading-ripple div:nth-child(2) { animation-delay: -0.5s; } @keyframes loading-ripple { 0% { top: 3.6vh; left: 3.6vh; width: 0; height: 0; opacity: 0; } 4.9% { top: 3.6vh; left: 3.6vh; width: 0; height: 0; opacity: 0; } 5% { top: 3.6vh; left: 3.6vh; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 7.2vh; height: 7.2vh; opacity: 0; } } /* ****** OVERVIEW ****** */ #admin-overview { display: block; overflow-y: auto; } .overview-box { width: calc(96% - 2vh); height: auto; margin: 2% 0 0 2%; padding: .5vh 1vh; float: left; background: #FFFFFF09; color: #FFFFFF90; border-radius: 1vh; font-family: 'Calibri', sans-serif; font-size: 1.5vh; } .overview-box[size=half] { width: calc(47% - 2vh); } .overview-box[size=large] { width: calc(96% - 2vh); } .overview-box p { width: 100%; margin: 0; } .overview-box p button { width: auto; margin: 0; float: right; background: none; border: none; outline: none; } .overview-box p button span[active] { color: var(--main); } .overview-box p span { margin-left: .5vh; font-size: 1.25vh; color: #FFFFFF60; } .overview-box p i, .overview-box-p i { margin-left: .5vh; font-size: 1.25vh; color: #FFFFFF40; transition: all 187ms ease; } .overview-box p i[left] { margin: .25vh .5vh 0 0; } .overview-box p i[right] { margin: .25vh .25vh 0 0; float: right; } .overview-box p i:hover { color: var(--main); cursor: pointer; } .overview-box-switch { margin: 1% 0 !important; } #overview-chart { width: 96%; height: 20vh; margin: 2% 0 0 2%; float: left; background: #FFFFFF09; border-radius: 1vh; } .overview-stats { width: calc((92% - 6vh) / 3); height: auto; margin: 2% 0 0 2%; padding: .5vh 1vh; float: left; background: #FFFFFF09; color: #FFFFFF90; border-radius: 1vh; font-family: 'Calibri', sans-serif; font-size: 1.5vh; } .overview-stats span { width: 100%; margin: -.2vh 0 0 0; float: left; font-size: 3vh; font-weight: bold; color: var(--main); } .teleport-coords { width: 30%; height: 3vh; margin: 1% 2% 1% 0; float: left; background: #FFFFFF09; border-radius: .75vh; } .teleport-coords span { width: 3vh; height: 3vh; margin: 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; font-family: 'Calibri', sans-serif; font-size: 2vh; font-weight: bold; text-align: center; line-height: 3vh; filter: drop-shadow(0 0 1vh var(--glow)); } .teleport-coords input { width: calc(100% - 5vh); height: 3vh; margin: 0; padding: 0 1vh; background: none; color: #FFF; border-radius: .75vh; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.65vh; } #teleport-button { width: calc(100% - 66% - 6vh); height: 3vh; margin: 1% 0; padding: 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.5vh; font-weight: normal; } #teleport-button[disabled] { color: #FFF6; cursor: not-allowed; } #teleport-button:not([disabled]):hover { background: var(--main); color: #FFF; } .teleport-button-icon { width: 3vh; height: 3vh; margin: 1% 0 1% 1%; padding: 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; transition: all 187ms ease; font-size: 1.45vh; text-align: center; line-height: 3vh; } .teleport-button-icon[disabled] { color: #FFF6 !important; cursor: not-allowed !important; } .teleport-button-icon:not([disabled]):hover { background: var(--main); color: #FFF; cursor: pointer; } #teleport-copy { position: relative; width: 3vh; height: 3vh; margin: 1% 0 1% 1%; padding: 0; float: left; border-radius: .75vh; overflow: hidden; } #teleport-copy i { width: 100%; height: 100%; margin: 0; background: #FFFFFF09; color: var(--main); font-size: 1.45vh; text-align: center; line-height: 3vh; } #teleport-copy #teleport-copy-main { transition: all 187ms ease; } #teleport-copy #teleport-copy-main:hover { background: #FFFFFF12; cursor: pointer; } #teleport-copy #teleport-copy-second { position: absolute; height: 0vh; left: 0; overflow: hidden; background: var(--main); color: #FFF; transition: height 2s linear; } .actions-button { width: calc((100% - 3%) / 4); height: 3vh; margin: 1% 1% 1% 0; padding: 0 2vh; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.75vh; } .actions-button:last-child { margin-right: 0; } .actions-button:not([disabled]):hover { background: var(--main); color: #FFFFFF; } .overview-player-switch { margin: 2% 0 1% 0 !important; } #overview-player-targets { float: right; opacity: .75; } #overview-player-targets .switch-text { margin-right: .5vh; } .player-action-switch { margin: 1vh !important; } #announce-input { width: calc(100% - 2vh); height: 5.15vh; margin: 1% 0; padding: .25vh 1vh; float: left; background: #FFFFFF06; color: #FFF; border-radius: .75vh; border: none; outline: none; resize: none; font-family: 'Calibri', sans-serif; font-size: 1.75vh; } #announce-area { width: 4.5vh; height: 3vh; margin: 2% .5vh 2% 0; padding: 0; float: left; background: #FFFFFF09; color: #FFF9; border-radius: .75vh; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.5vh; text-align: center; } #announce-button { width: calc(100% - 5vh); height: 3vh; margin: 2% 0; background: #FFFFFF09; color: var(--main); border-radius: .75vh; font-size: 1.5vh; } #announce-button:not([disabled]):hover { background: var(--main); color: #FFF; } #dimension-input { width: calc(100% - 5.5vh); height: 3vh; margin: 1% 0 2% 0; padding: 0 1vh; float: left; background: #FFFFFF06; color: #FFF; border-radius: .75vh; border: none; outline: none; resize: none; font-family: 'Calibri', sans-serif; font-size: 1.75vh; } #dimension-button { width: 3vh; height: 3vh; margin: 1% 0 2% .5vh; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; transition: all 187ms ease; font-size: 1.5vh; text-align: center; line-height: 3vh; } #dimension-button[disabled] { color: #FFF6; cursor: not-allowed; } #dimension-button:not([disabled]):hover { background: var(--main); color: #FFF; cursor: pointer; } #ped-input { width: calc(75% - 2vh); height: 3vh; margin: 1% 0; padding: 0 1vh; float: left; background: #FFFFFF06; color: #FFF; border-radius: .75vh; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.65vh; } #ped-button { width: calc(100% - 77% - 3vh); height: 3vh; margin: 1% 0 1% 1%; padding: 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.5vh; font-weight: normal; } #ped-button:not([disabled]):hover { background: var(--main); color: #FFF; } #ped-reset { width: 3vh; height: 3vh; margin: 1% 0 1% 1%; padding: 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; transition: all 187ms ease; font-size: 1.45vh; text-align: center; line-height: 3vh; } #ped-reset:hover { background: var(--main); color: #FFF; cursor: pointer; } #environment-time-slider { width: 6vh; height: 6vh; margin: 3% 0 0 0; float: left; } #environment-time-slider .rs-range-color, .rs-path-color { background-color: var(--main); } #environment-time-slider .rs-handle { background-color: #FFF; padding: 0px; border: 4px solid #FFF; } #environment-time-slider .rs-border { border-color: transparent; background: linear-gradient(60deg, var(--background)); } .overview-environment-items { width: 100%; max-height: 7.25vh; float: left; overflow-x: hidden; overflow-y: auto; } .environment-items-time { width: calc(94% - 6.5vh); margin-left: 6%; } .environment-time-input { width: 49%; height: 3vh; margin: 3% 0 1% 0; float: left; background: #FFFFFF09; border-radius: .75vh; } .environment-time-input:first-child { margin-right: 2%; } .environment-time-input span { width: 3vh; height: 3vh; margin: 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; font-family: 'Calibri', sans-serif; font-size: 2vh; font-weight: bold; text-align: center; line-height: 3vh; filter: drop-shadow(0 0 1vh var(--glow)); } .environment-time-input input { width: calc(100% - 5vh); height: 3vh; margin: 0; padding: 0 1vh; background: none; color: #FFF; border-radius: .75vh; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.65vh; } #environment-time-button { width: calc(94% - 6.5vh); height: 3vh; margin: 2% 0 2% 6%; background: #FFFFFF09; color: var(--main); border-radius: .75vh; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.5vh; } #environment-time-button[active=true]:hover { background: var(--main); color: #FFF; } #environment-weather-icon { min-width: 5vh; max-width: 6vh; height: 6vh; margin: 0; float: left; background: #f0f0; display: flex; align-items: center; font-size: 5vh; color: var(--main); filter: drop-shadow(0 0 2vh var(--glow)); } #environment-weather-title { width: calc(100% - 8vh); margin: .75vh 0 0 1.5vh; float: left; font-family: 'Calibri', sans-serif; font-size: 2.75vh; font-weight: bold; line-height: 2.75vh; color: var(--main); filter: drop-shadow(0 0 1vh var(--glow)); } #environment-weather-subtitle { width: calc(100% - 8vh); margin: 0 0 0 1.5vh; float: left; background: #f0f0; font-family: 'Calibri', sans-serif; font-size: 1.5vh; font-weight: normal; line-height: 2vh; color: #FFFFFF90;; } .weather-box { position: relative; width: calc(33.3% - 1vh); height: 32.5vh; margin: 1vh 0 0 1vh; float: left; } .weather-box-title { width: 100%; height: 2vh; margin: 0; float: left; font-family: 'Calibri', sans-serif; font-size: 1.5vh; color: #FFFFFF90; } .weather-box-items { position: relative; width: calc(100% - .5vh); height: calc(100% - 2vh); margin: 0; padding-right: .5vh; float: left; overflow-x: hidden; overflow-y: auto; } .weather-box-item { position: relative; width: 100%; height: auto; margin: .5vh 0 0 0; float: left; background: #FFFFFF09; color: #FFF; border-radius: .75vh; overflow: hidden; transition: all 187ms ease; } .weather-box-item:first-child { margin-top: 0; } .weather-types-item { height: 4vh; color: #FFF9; } .weather-types-item:not([disabled]):hover { background: #FFFFFF12; color: #FFF; cursor: pointer; } .weather-types-item:not([disabled]):hover i { opacity: .5; } .weather-types-item i { position: absolute; margin: 0; transform: translateX(-25%); float: left; z-index: 9; font-size: 4.5vh; line-height: 4vh; color: var(--main); opacity: .25; transition: all 187ms ease; } .weather-types-item span { position: relative; width: 100%; height: 100%; margin: 0; z-index: 99; display: flex; align-items: center; justify-content: center; font-family: 'Calibri', sans-serif; font-size: 2vh; } #weather-zones { width: calc(66.6% - 2.5vh); margin-left: 1.5vh; } #weather-zones-title span { margin-right: 1vh; transition: all 187ms ease; } #weather-zones-title span:hover, #weather-zones-title span[active] { color: var(--main); cursor: pointer; } .weather-zones-item { width: calc(100% - 1vh); height: 4vh; padding: .75vh .5vh; transition: height 222ms ease; } .weather-zones-item[active] { background: var(--soft2, #755eaa20); } .weather-zones-item .zone-item-icon { max-width: 5vh; height: 4vh; margin: 0; float: left; font-size: 4vh; color: var(--main); filter: drop-shadow(0 0 1.5vh var(--glow)); } .weather-zones-item h2 { width: calc(100% - 6vh); margin: 0 0 0 1vh; float: left; font-family: 'Calibri', sans-serif; font-size: 2.25vh; line-height: 2.25vh; color: var(--main); filter: drop-shadow(0 0 1vh var(--glow)); } .weather-zones-item h3 { width: calc(100% - 6vh); margin: 0 0 0 1vh; float: left; font-family: 'Calibri', sans-serif; font-size: 1.25vh; font-weight: normal; text-transform: capitalize; line-height: 1.25vh; color: #FFFFFF90; } .weather-zones-item h3 button { height: 2vh; margin-left: .5vh; background: none; color: #FFF9; border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.25vh; } .weather-zones-item h3 button i { margin-right: .35vh; color: var(--glow); transition: all 187ms ease; } .weather-zones-item h3 button:hover { color: #FFF; cursor: pointer; } .weather-zones-item h3 button:hover i { margin-right: .55vh; color: var(--main); } .weather-zones-item-index { position: absolute; width: 2vh; height: 2vh; top: .75vh; right: .75vh; background: #FFFFFF09; color: #FFF9; border-radius: .5vh; display: flex; align-items: center; justify-content: center; font-family: 'Calibri', sans-serif; font-size: 1.35vh; } .weather-zones-item[active] .weather-zones-item-index { background: var(--main); color: #FFF; } .weather-zones-item-actions { width: 100%; height: 2.25vh; margin: .5vh 0 0 0; float: left; display: flex; flex-direction: row; opacity: 1; animation-name: fadeWeatherActions; animation-duration: .2s; animation-iteration-count: 1; } @keyframes fadeWeatherActions { from { opacity: 0; } to { opacity: 1; } } .weather-zones-item-actions .item-actions-box { min-width: 2.25vh; height: 100%; margin: 0 .25vh; float: left; background: none; color: #FFF; border-radius: .5vh; overflow: hidden; } .weather-zones-item-actions .item-actions-box button { width: 100%; height: 100%; margin: 0; padding: 0 .75vh; background: #FFFFFF09; color: var(--main); border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.3vh; } .weather-zones-item-actions .item-actions-box button:hover { background: var(--main); color: #FFF; cursor: pointer; } .weather-zones-item-actions .item-actions-box input { width: 4vh; height: 100%; margin: 0; padding: 0 .5vh; float: left; background: #FFFFFF04; color: #FFF; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.3vh; } .weather-zones-item-actions .item-actions-box i { width: 2.25vh; height: 100%; margin: 0; float: left; background: #FFFFFF09; color: var(--main); display: flex; align-items: center; justify-content: center; transition: all 187ms ease; font-size: 1.3vh; } .weather-zones-item-actions .item-actions-box i[disabled] { color: #FFF6; cursor: not-allowed; } .weather-zones-item-actions .item-actions-box i:not([disabled]):hover { background: var(--main); color: #FFF; cursor: pointer; } /* ****** PLAYERS ****** */ #admin-players { height: 100%; padding: 0; display: none; } #players-search { width: calc(96% - 4vh); height: 3.5vh; margin: 2% 0 0 2%; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; border: none; outline: none; } #players-search i { width: 3.5vh; height: 3.5vh; margin: 0; float: left; font-size: 1.75vh; text-align: center; line-height: 3.5vh; } #players-search input { width: calc(100% - 3.5vh); height: 3.5vh; margin: 0; padding: 0; float: left; background: none; color: #FFF; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.87vh; } #players-search-sort { width: 3.5vh; height: 3.5vh; margin: 2% 0 0 .5vh; float: left; background: #FFFFFF09; color: #FFFFFF90; border-radius: 1vh; display: flex; align-items: center; justify-content: center; transition: all 187ms ease; font-size: 1.75vh; } #players-search-sort[active="true"] { color: var(--main); filter: drop-shadow(0 0 1vh var(--glow)); } #players-search-sort:hover { background: #FFFFFF12; cursor: pointer; } #players-items { width: 97.5%; height: calc(95.8% - 3.5vh); margin: 2% 0 0 2%; float: left; overflow-x: hidden; overflow-y: auto; } .players-item { width: calc(96.5% / 3); height: 8.5vh; margin: 0 1% 1% 0; float: left; background: #FFFFFF09; color: #FFF; border-radius: 1vh; } .players-item-name { width: calc(100% - 1.5vh); height: 1.75vh; margin: .75vh; padding: 0; color: var(--main); white-space: nowrap; overflow: hidden; display: flex; align-items: center; font-family: 'Calibri', sans-serif; font-size: 2vh; font-weight: bold; } .players-item-name span { height: 1.75vh; min-width: 1.25vh; margin: 0 .375vh 0 0; padding: 0 .25vh; float: left; background: var(--main); border-radius: .5vh; color: #fffb; display: flex; align-items: center; justify-content: center; font-size: 1.5vh; font-weight: normal; } .players-item-data { width: 100%; height: 2vh; margin: -.5vh 0 0 0; float: left; display: flex; flex-direction: row; align-items: center; white-space: nowrap; overflow: hidden; } .players-item-data i { margin: 0 0 0 .9vh; font-size: 1.2vh; color: var(--main); opacity: 0.75; } .players-item-data i span { margin-left: .5vh; font-family: 'Calibri', sans-serif; font-weight: normal; text-transform: capitalize; color: #FFFFFF90; } .player-item-buttons { width: 100%; height: auto; margin: .5vh 0 0 0; float: left; } .player-item-buttons i { width: 2.5vh; height: 2.5vh; margin: 0 0 0 .75vh; float: left; background: #FFFFFF06; color: var(--main); border-radius: .5vh; transition: all 187ms ease; font-size: 1.25vh; text-align: center; line-height: 2.5vh; } .player-item-buttons i[disabled] { color: #FFF6; cursor: not-allowed; } .player-item-buttons i:not([disabled]):hover { background: var(--main); color: #FFF; cursor: pointer; } /* ***** VEHICLE ***** */ #admin-vehicle { height: 98%; padding: 0 0 2% 0; display: none; overflow-x: hidden; overflow-y: auto; } .vehicle-box { position: relative; width: calc(96% - 2vh); height: auto; margin: 2% 0 0 2%; padding: .5vh 1vh; float: left; background: #FFFFFF09; color: #FFFFFF90; border-radius: 1vh; font-family: 'Calibri', sans-serif; font-size: 1.5vh; } .vehicle-box[size=half] { width: calc(47% - 2vh); } .vehicle-box[size=large] { width: calc(96% - 2vh); height: auto; } .vehicle-box p { width: 100%; margin: 0 0 .25vh 0; } .vehicle-box-input { width: calc(95% - 3.5vh); height: 3.5vh; margin: .5vh 0; padding: 0 1.5%; float: left; background: #FFFFFF09; color: #FFF; border-radius: .75vh; border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 2vh; font-weight: normal; } .vehicle-box-input[size="XS"] { width: calc(83% - 35vh); padding: 0 1.5%; } .vehicle-box-input[size="L"] { width: 95%; padding: 0 2.5%; } .vehicle-box-input[text="center"] { text-align: center; } #vehicle-spawn-input { width: calc(94% - 7vh); text-transform: lowercase; } #vehicle-spawn-input-label, #vehicle-lookup-input-label { position: absolute; width: calc(94% - 7vh); height: 3.5vh; margin: 1% 0; left: 1vh; padding: 0 1.5%; float: left; z-index: -1; font-family: 'Calibri', sans-serif; font-size: 2vh; font-weight: normal; line-height: 3.5vh; color: #FFF6; } .vehicle-box-button { width: 3.5vh; height: 3.5vh; margin: .5vh 0 .5vh 2%; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; border: none; outline: none; overflow: hidden; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; filter: drop-shadow(0 0 2vh var(--glow)); } .vehicle-box-button:not([disabled]):hover { background: var(--main); color: #FFF; } .vehicle-box-button[size="L"] { width: 100%; height: 3vh; margin: 1.5% 0; float: left; font-size: 1.6vh; line-height: 3vh; } .vehicle-box-button[disabled] { color: #FFFFFF90 !important; filter: none !important; opacity: 0.6; } .vehicle-box-button[animated=true]:hover i { margin-right: -.5vh; } .vehicle-box-button[animated=true] i { width: 3vh; height: 3vh; margin: 0 -3vh 0 0; float: right; font-size: 1.3vh; text-align: center; line-height: 3vh; color: #FFFFFF90; transition: all 187ms ease; } .vehicle-box-button[animated=true] i:hover { color: #FFF; } #vehicle-spawn-history { width: 100%; height: auto; margin: 1% 0 0 0; } #vehicle-spawn-history p { width: 100%; margin: 0 0 .25vh 0; font-family: 'Calibri', sans-serif; font-size: 1.5vh; color: #FFFFFF90; } #vehicle-spawn-history span { width: auto; height: 2.75vh; margin: 0 1% 1% 0; padding: 0 1.25vh; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; text-align: center; text-transform: uppercase; line-height: 2.75vh; filter: drop-shadow(0 0 2vh var(--glow)); } #vehicle-spawn-history span:hover { background: var(--main); color: #FFF; } #vehicle-box-modes { padding-bottom: .65vh; } #vehicle-lookup-button { margin-top: .5vh; } #vehicle-box-fav { height: 17.5vh; overflow: auto; } .vehicle-color-item { width: 3.5vh; height: 3.5vh; margin: 1% 1.25% 0 0; float: left; background: #FFFFFF20; border-radius: 1vh; opacity: .6; transition: all 99ms ease; } .vehicle-color-item:last-of-type { margin-right: 2%; } .vehicle-color-item[disabled] { filter: saturate(25%); } .vehicle-color-item:not([disabled]):hover { opacity: 1; cursor: pointer; } #vehicle-fuel-value { margin-left: 1%; font-family: 'Calibri', sans-serif; font-size: 1.1vh; color: var(--glow); } #vehicle-fuel-slider { width: 100%; height: 1.5vh; margin: .5vh 0 1vh 0; background: #FFFFFF12; border-radius: 1.5vh; outline: none; overflow: hidden; -webkit-appearance: none; } #vehicle-fuel-slider::-webkit-slider-thumb { width: 1.5vh; height: 1.5vh; background: var(--main); border-radius: 50%; cursor: pointer; box-shadow: -100.75vh 0 0 100vh var(--soft); -webkit-appearance: none; appearance: none; } /* ***** CHAT ***** */ #admin-chat { height: 100%; padding: 0; display: none; overflow: hidden; } #chat-header { width: calc(96% - 3vh); height: 4.5vh; margin: 2% 2% 0 2%; padding: 0 1.5vh; background: #FFFFFF09; border-radius: 1vh; } #chat-header-icon { width: auto; height: 100%; margin: .5% 0 0 0; float: left; display: flex; align-items: center; font-size: 2.25vh; color: var(--main); filter: drop-shadow(0 0 2vh var(--glow)); } #chat-header-name { height: 100%; margin: 0 0 0 2%; float: left; color: var(--main); display: flex; align-items: center; font-family: 'Calibri', sans-serif; font-size: 2.25vh; font-weight: bold; } #chat-header-name span { font-weight: normal; color: #FFFFFF90; } #chat-header-bell { width: 3vh; height: 100%; margin: 0 -.5vh 0 0; float: right; display: flex; align-items: center; justify-content: center; transition: all 187ms ease; font-size: 1.75vh; color: var(--main); filter: drop-shadow(0 0 2vh var(--glow)); } #chat-header-bell[active=true] { color: var(--main); filter: drop-shadow(0 0 2vh var(--glow)); } #chat-header-bell[active=false] { color: #FFFFFF60; filter: none; } #chat-box { width: 100%; height: calc(93.5% - 8.5vh); margin: 0; padding: .5vh 0 0 0; overflow-x: hidden; overflow-y: auto; } .chat-message-left { width: 100%; height: auto; margin: 0; float: left; transition: all 187ms ease; } .chat-message-left:hover { background: #FFFFFF06; } .chat-message-left div { max-width: 50%; height: auto; margin: .5vh 0 .5vh 2%; padding: .75vh; float: left; background: #FFFFFF12; color: #FFF; border-radius: 1vh 1vh 1vh 0; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; } .chat-message-left div p { width: 100%; margin: 0 0 .25vh 0; font-size: 1.5vh; color: var(--main); } .chat-message-left div p span { margin-left: .5vh; margin-right: 2vh; color: #FFFFFF90; } .chat-message-right { width: 100%; height: auto; margin: 0; float: left; transition: all 187ms ease; } .chat-message-right:hover { background: #FFFFFF06; } .chat-message-right div { max-width: 50%; height: auto; margin: .5vh 2% .5vh 0; padding: .75vh .75vh .75vh 1vh; float: right; background: var(--main); color: #FFF; border-radius: 1vh 1vh 0 1vh; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; } #chat-actions { width: 96%; height: 3.5vh; margin: 2%; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; } #chat-pings { width: 100%; height: 9vh; margin: 0 0 1% 0; padding: 0; background: none; color: var(--main); border-radius: 1vh; overflow-x: hidden; overflow-y: auto; display: none; } #chat-pings div { width: 96%; height: 3vh; margin: 0; padding: 0 2%; float: left; background: #FFFFFF00; color: #FFF; border-radius: 1vh; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; text-align: left; line-height: 3vh; } #chat-pings div span { margin-left: 1%; font-weight: normal; color: #FFFFFF90; } #chat-pings div:hover { background: #FFFFFF06; } #chat-actions input { width: calc(98% - 3.5vh); height: 3.5vh; margin: 0; padding: 0 0 0 2%; float: left; background: none; color: var(--main); border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; } #chat-actions i { width: 3.5vh; height: 3.5vh; margin: 0; float: left; display: flex; align-items: center; justify-content: center; font-size: 1.5vh; filter: drop-shadow(0 0 .75vh #FFFFFF00); color: #FFFFFF90; } #chat-actions i:hover { color: var(--main); filter: drop-shadow(0 0 .75vh var(--glow)); } /* ****** REPORTS ****** */ #admin-reports { height: 100%; padding: 0; display: none; } #reports-header { width: 96%; height: 3.5vh; margin: 2% 0 0 2%; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; border: none; outline: none; overflow: hidden; } #reports-header h2 { width: calc(100% - 2vh); height: 3.5vh; margin: 0; padding: 0 1vh; float: left; font-family: 'Calibri', sans-serif; font-size: 2.25vh; font-weight: bold; line-height: 3.5vh; transition: all 222ms ease; } #reports-header h2 span { margin-right: 1vh; color: #FFFFFF60; font-weight: normal; } #reports-header input { width: calc(100% - 8vh); height: 100%; margin: 0; padding: 0 1vh; float: left; background: none; color: #FFF; border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.75vh; } #reports-header i { width: 6vh; height: 100%; margin: 0; float: left; background: #FFFFFF09; color: var(--main); display: flex; align-items: center; justify-content: center; transition: all 187ms ease; font-size: 1.7vh; filter: drop-shadow(0 0 1.5vh var(--glow)); } #reports-header i:hover { background: var(--main); color: #FFFFFF; cursor: pointer; } #reports-list { width: 96%; height: calc(94% - 3.5vh); margin: 2%; float: left; border-radius: 1vh; overflow: auto; transition: all 187ms ease; } .report-item { width: calc(100% - 2vh); height: 6vh; margin: 0 0 1vh 0; padding: 1vh; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; } .report-item h2 { width: calc(100% - 7vh); height: 3vh; margin: 0; float: left; font-family: 'Calibri', sans-serif; font-size: 2.75vh; font-weight: bold; line-height: 3vh; } .report-item h2 span { margin-right: 1vh; color: #FFFFFF60; font-weight: normal; } .report-item-props { width: calc(100% - 7vh); height: 3vh; margin: 0; float: left; overflow: hidden; } .report-item-props span { width: auto; height: 2vh; margin: .5vh .75vh .5vh 0; padding: 0 .5vh; float: left; background: var(--soft2); color: #FFFFFF90; border-radius: .5vh; font-family: 'Calibri', sans-serif; font-size: 1.45vh; font-weight: normal; line-height: 1.92vh; } .report-item-props span i { margin-right: .5vh; font-size: 1.25vh; color: var(--main); filter: drop-shadow(0 0 1vh var(--glow)); } .report-item-button { width: 6vh; height: 6vh; margin: -3vh 0 0 0; float: right; background: #FFFFFF09; border-radius: 1vh; display: flex; align-items: center; justify-content: center; transition: all 187ms ease; font-size: 2.5vh; filter: drop-shadow(0 0 2vh var(--glow)); } .report-item-button:hover { background: var(--main); color: #FFF; cursor: pointer; } #reports-detail { width: 96%; height: calc(94% - 3.5vh); margin: 0% 2% 2% 2%; float: left; border-radius: 1vh; overflow: auto; transition: all 187ms ease; } #report-detail-screenshot { width: 30vh; height: 16.9vh; aspect-ratio: 16/9; margin: 0; float: left; background: #FFFFFF09; border-radius: 1vh; object-fit: cover; object-position: center; } #report-detail-screenshot:hover { cursor: pointer; } #report-detail-props { width: calc(100% - 31vh); height: 17vh; margin: 0 0 0 1vh; float: left; border-radius: .75vh; overflow-x: visible !important; overflow-y: auto !important; } #report-detail-props span { width: 100%; height: 3vh; margin: 0 0 .5vh 0; float: left; } #report-detail-props span:last-of-type { margin: 0; } #report-detail-props span i { width: 3vh; height: 3vh; margin: 0 1vh 0 0; float: left; background: var(--soft2); color: var(--main); border-radius: .75vh; overflow: hidden; font-size: 1.55vh; text-align: center; line-height: 3vh; filter: drop-shadow(0 0 1vh var(--glow)); } #report-detail-props span b { margin: 0; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; line-height: 3vh; color: #FFF; } #report-detail-chat { width: 28vh; height: calc(100% - 24vh); margin: 1vh 0 0 0; padding: 1vh; float: left; background: #FFFFFF09; border-radius: 1vh; overflow-x: hidden; overflow-y: auto; } #report-detail-chat div { width: 100%; height: auto; float: left; } #report-detail-chat div span { max-width: 60%; height: auto; margin: 0 0 .5vh 0; padding: .5vh; float: left; background: #FFFFFF09; color: #FFFFFF; border-radius: .75vh .75vh .75vh 0; font-family: 'Calibri', sans-serif; font-size: 1.5vh; font-weight: normal; } #report-detail-chat div span a { color: #FFFFFF90; font-style: italic; text-decoration: none; } #report-detail-chat div span a:hover { text-decoration: underline; cursor: pointer; } #report-detail-chat div span[self="true"] { float: right; background: var(--main); border-radius: .75vh .75vh 0 .75vh; text-align: right; } #report-detail-chat div:last-of-type span { margin: 0; } #report-chat-input { width: 26vh; height: 3vh; margin: .5vh 0 0 0; padding: 0 0 0 1vh; float: left; background: #FFFFFF09; color: #FFF; border-radius: .75vh 0 0 .75vh; border: none; outline: none; transition: all 187ms all; font-family: 'Calibri', sans-serif; font-size: 1.55vh; font-weight: normal; } #report-chat-send { width: 3vh; height: 3vh; margin: .5vh 0 0 0; float: left; background: #FFFFFF09; color: #FFFFFF90; border-radius: 0 .75vh .75vh 0; border: none; outline: none; transition: all 187ms all; font-size: 1.5vh; text-align: center; line-height: 3vh; } #report-chat-send:not([active="false"]):hover { color: var(--main); cursor: pointer; } #report-detail-actions { width: calc(100% - 31vh); height: calc(100% - 18.5vh); margin: -26vh 0 0 1vh; float: left; } #report-detail-actions button { width: 100%; height: 3vh; margin: 0 0 .75vh 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.65vh; font-weight: normal; filter: drop-shadow(0 0 1.5vh var(--main)); } #report-detail-actions button[active="true"] { background: var(--soft2); } #report-detail-actions button[active="disabled"] { background: #FFFFFF06; color: #FFFFFF60; } #report-detail-actions button:last-of-type { margin: 0; } #report-detail-actions button:not([active="disabled"]):hover { background: var(--main); color: #FFF; } #report-detail-actions button[active="disabled"]:hover { cursor: default; } /* ****** FRAKTION ****** */ #admin-fraks { height: 100%; padding: 0; display: none; } #fraks-search { width: 96%; height: 3.5vh; margin: 2% 0 0 2%; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; border: none; outline: none; overflow: hidden; } #fraks-search i { width: 3.5vh; height: 3.5vh; margin: 0; float: left; font-size: 1.75vh; text-align: center; line-height: 3.5vh; } #fraks-search input { width: calc(100% - 3.5vh); height: 3.5vh; margin: 0; padding: 0; float: left; background: none; color: #FFF; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.87vh; } #fraks-items { width: 96%; height: calc(92% - 8.5vh); margin: 2% 2% 0 2%; float: left; border-radius: 1vh; overflow: auto; } .frak-item { width: calc(100% - 2vh); height: 6vh; margin: 1% 0; padding: 1vh; background: #FFFFFF09; color: var(--main); border-radius: 1vh; overflow: auto; transition: all 187ms ease; } .frak-item::-webkit-scrollbar { width: 0; } .frak-item-left { width: calc(100% - 3vh); float: left; } .frak-item h1 { width: 100%; height: 3vh; margin: 0; font-family: 'Calibri', sans-serif; font-size: 2.75vh; font-weight: bold; } .frak-item h1 b { width: .4vh; height: .4vh; margin: 1.4vh .5vh 0 0; float: left; background: #ff8000; border-radius: 50%; transition: all 99ms ease; } .frak-item h1 span { margin-left: 1%; font-size: 1.75vh; font-weight: normal; color: #FFFFFF90; } .frak-item-data { width: auto; height: 2vh; margin: 1% 1.5vh 0 0; float: left; font-size: 1.5vh; line-height: 2vh; } .frak-item-data span { margin-left: .5vh; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; line-height: 2vh; color: #FFFFFF90; transition: all 187ms ease; } .frak-item-data[onclick] span:hover { color: #FFF; } .frak-item-actions { width: 2vh; height: 6vh; margin: 0 0 0 1vh; float: left; background: #FFFFFF06; border-radius: .5vh; overflow: hidden; } .frak-item-actions i { width: 2vh; height: 2vh; margin: 0; font-size: 1.1vh; text-align: center; line-height: 2vh; color: var(--main); transition: all 187ms ease; } .frak-item-actions i:hover { background: var(--main); color: #FFF; } /* ****** WEATHER ****** */ #admin-weather { height: 100%; padding: 0; display: none; } /* ****** BANS ****** */ #admin-bans { height: 100%; padding: 0; display: none; } #bans-search { width: 96%; height: 3.5vh; margin: 2% 0 0 2%; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; border: none; outline: none; overflow: hidden; } #bans-search i { width: 3.5vh; height: 3.5vh; margin: 0; float: left; font-size: 1.75vh; text-align: center; line-height: 3.5vh; } #bans-search input { width: calc(100% - 10.5vh); height: 3.5vh; margin: 0; padding: 0; float: left; background: none; color: #FFF; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.87vh; } #bans-create { width: 7vh !important; height: 3.5vh; margin: 0; float: left; background: #FFFFFF06; color: var(--main); border-radius: 0; transition: all 187ms ease; font-size: 1.87vh; text-align: center; line-height: 3.5vh; } #bans-create[disabled] { color: #FFFFFF60; } #bans-create:not([disabled]):hover { background: var(--main); color: #FFFFFF90; cursor: pointer; } .bans-stats { width: calc((94% - 6vh) / 3); height: 5vh; margin: 1% 0 0 1%; padding: .5vh 1vh; float: left; background: #FFFFFF09; color: #FFFFFF90; border-radius: 1vh; font-family: 'Calibri', sans-serif; font-size: 1.5vh; } .bans-stats span { width: 100%; margin: -1% 0 0 0; float: left; font-size: 3vh; font-weight: bold; color: var(--main); } #bans-items { width: 100%; height: calc(92% - 8.5vh); margin: 2% 0 0 0; float: left; overflow-x: hidden; overflow-y: auto; } .bans-item { width: 96%; height: 6vh; margin: 1% 2%; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; overflow: hidden; transition: all 187ms ease; } .bans-item-icon { width: 6vh; height: 6vh; margin: 0; float: left; display: flex; align-items: center; justify-content: center; font-size: 2.75vh; filter: drop-shadow(0 0 2vh var(--main)); } .bans-item-name { width: calc(100% - 12vh); height: auto; margin: .5vh 0 0 0; float: left; color: #FFF; font-family: 'Calibri', sans-serif; font-size: 2.25vh; font-weight: bold; } .bans-item-name span { margin-left: 2%; font-size: 1.5vh; font-weight: normal; color: #FFFFFF90; } .bans-item-identifier { width: calc(100% - 12vh); height: 2vh; margin: 0; float: left; } .bans-item-identifier i { width: auto; height: 2vh; margin: 0 1% 0 0; float: left; font-size: 1.2vh; line-height: 2vh; color: var(--glow); filter: drop-shadow(0 0 1vh var(--glow)); } .bans-item-identifier span { width: auto; height: 2vh; margin: 0 3% 0 0; float: left; font-family: 'Calibri', sans-serif; font-size: 1.4vh; font-weight: normal; line-height: 2vh; color: #FFFFFF60; transition: all 187ms ease; } .bans-item-identifier span:hover { color: #FFFFFF90; } .bans-item-button { width: 4vh; height: 4vh; margin: -2.25vh 1vh 1vh 1vh; float: right; background: #FFFFFF09; color: var(--main); border-radius: 1vh; border: none; outline: none; transition: all 187ms ease; } .bans-item-button:hover { background: #FFFFFF12; } .bans-item-button i { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 2vh; line-height: 4vh; filter: drop-shadow(0 0 1.5vh var(--glow)); transform: rotate(360deg); transition: all 187ms ease; } .bans-item-data { width: 100%; height: 16.5vh; margin: 0; float: left; opacity: 0; overflow-x: hidden; overflow-y: auto; transition: all 187ms ease; } .ban-data-item { width: calc(100% - 3vh); max-height: 5vh; margin: 0 0 1vh 1vh; padding: .5vh; float: left; background: #FFFFFF06; border-radius: .75vh; color: var(--main); overflow-x: hidden; overflow-y: auto; font-family: 'Calibri', sans-serif; font-size: 1.6vh; font-weight: bold; line-height: 1.6vh; } .ban-data-item span { width: 100%; height: auto; margin: -.25vh 0 0 0; padding: 0; float: left; font-size: 1.4vh; font-weight: normal; line-height: normal; line-break: anywhere; color: #FFF; } .ban-data-item[size="1/4"] { width: calc((100% - 5vh) / 4); } .ban-data-item[size="1/2"] { width: calc((100% - 5vh) / 2); height: 5vh !important; } .ban-data-item[size="3/4"] { width: calc(((100% - 5vh) / 4) * 3); } .ban-data-item[hover="true"] span { transition: all 187ms ease; color: #FFFFFF90; } .ban-data-item[hover="true"] span:hover { color: #FFF; } .ban-data-action { width: 3.5vh; height: 3.5vh; margin: 0 -.5vh 1vh 1vh; padding: 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; border: none; outline: none; transition: all 187ms ease; font-size: 1.6vh; text-align: center; line-height: 3.5vh; filter: drop-shadow(0 0 2vh var(--glow)); } .ban-data-action:hover { background: var(--main); color: #FFF; cursor: pointer; } .ban-data-input { width: 3.5vh; height: 3.5vh; margin: 0 -.5vh 1vh 1vh; padding: 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; text-align: center; line-height: 3.5vh; } .ban-data-button { width: calc(100% - 14.5vh); height: 3.5vh; margin: 0 1vh 1vh 1.5vh; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.75vh; filter: drop-shadow(0 0 2vh var(--glow)); } .ban-data-button:hover { background: var(--main); color: #FFF; } /* ****** DEVELOPER ****** */ #admin-developer { height: 100%; padding: 0; display: none; } #developer-resources { width: 100%; height: 100%; margin: 0; float: left; } #resources-search { width: 96%; height: 3.5vh; margin: 2% 0 0 2%; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; border: none; outline: none; } #resources-search i { width: 3.5vh; height: 3.5vh; margin: 0; float: left; font-size: 1.75vh; text-align: center; line-height: 3.5vh; } #resources-search input { width: calc(100% - 3.5vh); height: 3.5vh; margin: 0; padding: 0; float: left; background: none; color: #FFF; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.87vh; } #resources-search span { position: absolute; width: auto; height: 3.5vh; margin: 0; right: 3%; float: left; font-family: 'Calibri', sans-serif; font-size: 1.3vh; text-align: center; line-height: 3.5vh; color: #FFFFFF60; } .resources-stats { width: calc((94% - 6vh) / 3); height: 5vh; margin: 1% 0 0 1%; padding: .5vh 1vh; float: left; background: #FFFFFF09; color: #FFFFFF90; border-radius: 1vh; font-family: 'Calibri', sans-serif; font-size: 1.5vh; } .resources-stats span { width: 100%; margin: -1% 0 0 0; float: left; font-size: 3vh; font-weight: bold; color: var(--main); } #resources-items { width: 96%; height: calc(92% - 8.5vh); margin: 2% 2% 0 2%; float: left; border-radius: 1vh; overflow: auto; } .resource-item { width: calc(100% - 2vh); height: 6vh; margin: 1% 0; padding: 1vh; background: #FFFFFF09; color: var(--main); border-radius: 1vh; overflow: auto; transition: all 187ms ease; } .resource-item::-webkit-scrollbar { width: 0; } .resource-item-left { width: calc(100% - 9vh); float: left; } .resource-item-right { width: 9vh; height: 6vh; float: left; } .resource-item h1 { width: calc(100% - 10vh); height: 3vh; margin: 0; font-family: 'Calibri', sans-serif; font-size: 2.75vh; font-weight: bold; } .resource-item h1 b { width: .4vh; height: .4vh; margin: 1.4vh .5vh 0 0; float: left; background: #ff8000; border-radius: 50%; transition: all 99ms ease; } .resource-item h1 span { margin-left: 1%; font-size: 1.75vh; font-weight: normal; color: #FFFFFF90; } .resource-item-data { width: auto; height: 2vh; margin: 1% 2% 0 0; float: left; font-size: 1.5vh; line-height: 2vh; } .resource-item-data span { font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; line-height: 2vh; color: #FFFFFF90; transition: all 187ms ease; } .resource-item-data[onclick] span:hover { color: #FFF; } .resource-item-actions { width: 2vh; height: 6vh; margin: 0 0 0 1vh; float: left; background: #FFFFFF06; border-radius: .5vh; overflow: hidden; } .resource-item-actions i { width: 2vh; height: 2vh; margin: 0; font-size: 1.1vh; text-align: center; line-height: 2vh; color: var(--main); transition: all 187ms ease; } .resource-item-actions i:hover { background: var(--main); color: #FFF; } .resource-item-config { width: 6vh; height: 6vh; margin: 0; float: left; background: #FFFFFF06; color: var(--main); border-radius: .75vh; transition: all 187ms ease; font-size: 1.75vh; text-align: center; line-height: 6vh; } .resource-item-config:hover { background: var(--main); color: #FFF; } #developer-code { width: 100%; height: 100%; margin: 0; float: left; display: none; } #developer-code-info { width: calc(96% - 2vh); height: 4vh; margin: 2%; padding: 0 1vh; float: left; background: #FFFFFF09; color: var(--main); border-radius: 1vh; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; line-height: 4vh; } #code-info-back { width: auto; height: 4vh; margin: 0 1% 0 0; float: left; font-size: 1.5vh; text-align: center; line-height: 4vh; color: #FFFFFF90; transition: all 187ms ease; } #code-info-back:hover { color: var(--main); } .code-info-action { width: 3vh; height: 4vh; margin: 0; float: right; font-size: 1.5; text-align: center; line-height: 4vh; color: #FFFFFF90; transition: all 187ms ease; } .code-info-action:hover { color: var(--main); } #developer-code-text { width: 96%; height: calc(94% - 6vh); margin: 0 2%; padding: 1vh 0; border-radius: 1vh; border: none; outline: none; } /* ********* ****** ********* */ /* ********* WINDOW ********* */ /* ********* ****** ********* */ #admin-container-window { position: absolute; width: calc(100% - 22vh); height: 100%; left: 22vh; background: #0003; display: none; } #admin-window-box { width: calc(40vh - 4%); height: calc(30vh - 4%); margin: 50% 0 0 50%; padding: 2%; transform: translate(-50%, -50%); z-index: 999; background: linear-gradient(60deg, var(--background2)); color: #FFF; border-radius: 1.5vh; box-shadow: 0 0 6vh 0 #000; } #admin-window-title { width: 100%; margin: 0; font-family: 'Calibri', sans-serif; font-size: 3vh; font-weight: bold; text-transform: uppercase; line-height: 3vh; color: var(--main); white-space: nowrap; overflow: hidden; } #admin-window-title span { margin-left: .5%; font-weight: normal; color: #FFFFFF60; } #admin-window-items { width: 100%; height: calc(98% - 3vh); margin: 2% 0 0 0; padding-right: 1%; border-radius: 1vh; overflow-x: hidden; overflow-y: auto; } /* WIDTH BUTTONS */ .admin-window-button { width: 100%; height: 3.5vh; margin: 2% 2% 0 0; padding: 0 4%; float: left; background: #FFFFFF09; color: #FFF9; border-radius: .75vh; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; } .admin-window-button:not([disabled=true]):hover { background: #FFFFFF12; color: #FFF; } /* DATA (COPY) FIELDS */ .admin-window-data { width: 100%; height: auto; margin: .5vh 0 .25vh 0; float: left; font-family: 'Calibri', sans-serif; font-size: 1.5vh; color: var(--main); overflow: visible; } .admin-window-data[size="1/3"] { width: calc(98% / 3); } .admin-window-data[size="2/3"] { width: calc(98% * 0.666); margin-right: 2%; } .admin-window-data span { width: calc(100% - 2vh); height: 3vh; margin: .1vh 0 0 0; padding: 0 1vh; float: left; background: #FFFFFF09; color: #FFFFFF90; border-radius: .75vh; overflow: hidden; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.87vh; line-height: 3vh; } .admin-window-data span i { width: 2vh; height: 3vh; margin: 0; float: right; font-size: 1.5vh; text-align: center; line-height: 3vh; color: #FFFFFF60 !important; transition: all 187ms ease; opacity: 0; } .admin-window-data span:hover { color: #FFFFFF; cursor: pointer; } .admin-window-data span:hover i { opacity: 1; } .admin-window-data[type="code"] span { height: auto; padding-top: .5vh; font-family: 'Consolas', monospace; font-size: 1.25vh; line-height: 1.5vh; } /* WINDOW ACTIONS */ .players-window-action { width: 100%; height: auto; margin: 1% 0 0 0; float: left; font-family: 'Calibri', sans-serif; font-size: 1.75vh; color: var(--main); } .players-window-action span { width: 100%; margin-bottom: -1%; float: left; color: #FFFFFF90; } .players-window-action button { width: auto; height: 3.5vh; margin: 2% 2% 0 0; padding: 0 4%; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.87vh; font-weight: normal; } .players-window-action button:not([disabled=true]):not([active=false]):hover { background: var(--main); color: #FFF; } .players-window-action[type=warning] { margin-top: 2%; } .players-window-action[type=warning] button { color: #ae4242; } .players-window-action[type=warning] button:hover { background: #ae4242; color: #FFF; } .players-window-action button[active=true] { background: var(--main); color: #FFF; } .player-action-tag { width: 100%; height: auto; margin: 2% 0 0 0; float: left; font-family: 'Calibri', sans-serif; font-size: 1.5vh; font-weight: normal; filter: drop-shadow(0 0 2vh var(--glow)); color: var(--main); } .player-action-tag span { font-weight: lighter; color: #FFFFFF60; } .player-action-input { width: 96%; height: 3.5vh; margin: 0; padding: 0 2%; float: left; background: #FFFFFF09; color: #FFF; border-radius: 1vh; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; } .player-action-input-time { width: calc((98% / 2) - 4%); height: 3.5vh; margin: 0; padding: 0 2%; float: left; background: #FFFFFF09; color: #FFF; border-radius: 1vh; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; } .player-action-input-time:nth-child(even) { margin-right: 2%; } .player-action-textarea { width: 96%; height: 6vh; margin: 0; padding: 1% 2%; float: left; background: #FFFFFF09; color: #FFF; border-radius: 1vh; border: none; outline: none; resize: none; font-family: 'Calibri', sans-serif; font-size: 1.65vh; font-weight: normal; } .player-action-textarea[type="message"] { height: 15vh; } .player-action-switch-box { width: 100%; height: 4.5vh; margin: 0; float: left; background: #FFFFFF09; color: #FFF; border-radius: 1vh; border: none; outline: none; resize: none; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; line-height: 4.5vh; } .player-action-button { width: 100%; height: 4vh; margin: 5% 0 0 0; float: left; background: #FFFFFF09; color: #FFF; border-radius: 1vh; border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.87vh; font-weight: normal; filter: drop-shadow(0 0 2vh var(--glow)); } .player-action-button:hover { background: var(--main); color: #FFF; } /* WINDOW BANS */ .player-ban-type { position: relative; width: 100%; height: 3.5vh; margin: .75vh 0 0 0; padding: 0 1vh; float: left; background: #FFFFFF09; color: #FFF9; border-radius: 1vh; overflow: hidden; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; text-align: left; line-height: 3.5vh; } .player-ban-type p { position: absolute; width: 100%; height: 100%; margin: 0; top: 0 !important; left: 1vh; z-index: 9; filter: drop-shadow(0 0 2vh var(--glow)); -webkit-mask-image: linear-gradient(90deg, red 70%, transparent 75%); transition: all 187ms ease; } .player-ban-type span { position: absolute; width: auto; height: 100%; margin: 0; top: 0; right: 1vh; z-index: 99; color: var(--main); filter: drop-shadow(0 0 1.5vh #000); transition: opacity 187ms ease; } .player-ban-type:hover { background: #FFFFFF12; color: #FFF; } .player-ban-type:hover p { -webkit-mask-image: linear-gradient(90deg, red 100%, transparent 100%) } .player-ban-type:hover span { opacity: 0; } /* WINDOW INVENTORY */ #payers-window-inventory-search { width: 100%; height: 3vh; margin: 0 0 1.5vh 0; float: left; background: #FFFFFF09; color: #FFFFFF60; border-radius: .75vh; } #payers-window-inventory-search i { width: 3vh; height: 3vh; margin: 0; float: left; display: flex; align-items: center; justify-content: center; transition: all 187ms ease; font-size: 1.4vh; } #payers-window-inventory-search input { width: calc(100% - 3vh); height: 100%; margin: 0; padding: 0; float: left; background: none; color: #FFFFFF90; border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.5vh; } #payers-window-inventory-search:focus-within i { color: var(--main); } .players-window-inventory { position: relative; width: 100%; height: 4vh; margin: 0 0 2% 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; font-family: 'Calibri', sans-serif; font-size: 2vh; font-weight: bold; line-height: 4vh; } .players-window-inventory span { margin-left: 1%; font-weight: normal; color: #FFFFFF90; } .window-inventory-icon { position: relative; width: 4vh; height: 4vh; margin: 0 2% 0 0; float: left; background: #FFFFFF06; border-radius: .75vh; font-size: 1.75vh; text-align: center; line-height: 4vh; filter: drop-shadow(0 0 1vh var(--glow)); } .window-inventory-label { max-width: calc(100% - 18vh); margin: 0; float: left; overflow: hidden; white-space: nowrap; } .window-inventory-label span { margin-left: 1%; } .window-inventory-input { width: calc(96% - 12vh); height: 4vh; margin: 0; padding: 0 2% 0 0; float: left; background: none; color: var(--main); border: none; outline: none; font-family: 'Calibri', sans-serif; font-size: 1.87vh; font-weight: normal; text-transform: lowercase; } .window-inventory-input::placeholder { text-transform: uppercase; } .players-window-inventory label { position: absolute; width: calc(96% - 12vh); height: 4vh; margin: 0 0 0 calc(4vh + 2%); left: 0; padding: 0 2% 0 0; float: left; z-index: -1; font-family: 'Calibri', sans-serif; font-size: 1.87vh; font-weight: normal; line-height: 4vh; color: #FFF6; } .window-inventory-button { width: 8vh; height: 4vh; margin: 0; float: left; background: #FFFFFF06; color: #FFFFFF90; border-radius: .75vh; border: none; outline: none; backdrop-filter: blur(.15vh); transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.87vh; font-weight: normal; } .window-inventory-button:hover { background: #FFFFFF12; color: var(--main); } .window-inventory-actions { position: absolute; width: auto; /*calc(12vh + 3%)*/ height: 4vh; margin: 0; top: 0; right: 0; } .window-inventory-actions input { width: 4vh; height: 4vh; margin: 0 1vh 0 0; padding: 0; float: left; background: #FFFFFF06; color: #FFF; border-radius: .75vh; border: none; outline: none; backdrop-filter: blur(.15vh); transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.75vh; text-align: center; } .window-inventory-actions input:focus { background: #FFFFFF09; } .window-inventory-actions i { width: 4vh; height: 4vh; margin: 0 0 0 0; float: right; background: #FFFFFF06; color: #FFFFFF90; border-radius: .75vh; backdrop-filter: blur(.15vh); transition: all 187ms ease; font-size: 1.75vh; text-align: center; line-height: 4vh; } .window-inventory-actions i:nth-child(2) { border-radius: 0 .75vh .75vh 0; } .window-inventory-actions i:nth-child(3) { border-radius: .75vh 0 0 .75vh; } .window-inventory-actions i:hover { background: #FFFFFF12; color: var(--main); } .window-inventory-spacer { width: 100%; min-height: .5vh; margin: .5vh 0 0 0; float: left; font-family: 'Calibri', sans-serif; font-size: 1.5vh; font-weight: normal; color: #FFF6; } .window-inventory-spacer i { margin: .25vh .25vh 0 0; float: right; font-size: 1.25vh; color: #FFF4; transition: all 187ms ease; } .window-inventory-spacer i:hover { color: var(--main); cursor: pointer; } /* WINDOW WARNS */ .player-window-warn { width: 100%; height: 4vh; margin: 0 0 2% 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: .75vh; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: bold; line-height: 4vh; } .player-window-warn-id { min-width: 3vh; height: 4vh; margin: 0 1vh 0 0; padding: 0 .5vh; float: left; background: #FFFFFF09; color: #FFFFFF90; border-radius: .75vh; font-weight: normal; text-align: center; } .player-window-warn-arrow { width: 4vh; height: 4vh; margin: 0; float: right; font-size: 1.75vh; text-align: center; line-height: 4vh; color: #FFFFFF90; transform: rotate(360deg); transition: all 187ms ease; } .player-window-warn-arrow:hover { color: var(--main); } .warn-item-data { width: 100%; height: auto; margin: 0; float: left; opacity: 0; overflow-x: hidden; overflow-y: auto; transition: all 187ms ease; } .warn-data-item-reason { width: calc(100% - 2vh); height: auto; margin: 1vh; float: left; color: var(--main); overflow-x: hidden; overflow-y: auto; font-family: 'Calibri', sans-serif; font-size: 1.6vh; font-weight: bold; line-height: 1.6vh; } .warn-data-item-reason span { width: 100%; height: auto; margin: 0; padding: 0; float: left; font-size: 1.4vh; font-weight: normal; text-align: left; line-height: normal; line-break: anywhere; color: #FFF; } .warn-data-item-admin { width: calc(100% - 2vh); height: auto; margin: 0 1vh 1vh 1vh; padding: 0; float: left; color: var(--main); overflow: hidden; font-family: 'Calibri', sans-serif; font-size: 1.5vh; font-weight: bold; text-align: left; line-height: 1.6vh; } .warn-data-item-admin span { margin: 0 0 0 1vh; font-weight: normal; color: #FFFFFF90; transition: all 187ms ease; } .warn-data-item-admin span:hover { color: #FFF; } .warn-data-item-button { width: calc(100% - 2vh); height: 2.75vh; margin: 0 1vh 1vh 1vh; padding: 0; float: left; background: #FFFFFF09; color: var(--main); border-radius:.75vh; border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; font-size: 1.5vh; font-weight: normal; } .warn-data-item-button:hover { background: var(--main); color: #FFF; } /* ****** ***** ****** */ /* ****** IMAGE ****** */ /* ****** ***** ****** */ #admin-image { position: absolute; width: 140vh; height: 80vh; margin: 0; top: 10vh; left: 50%; transform: translateX(-50%) scale(0); background: var(--soft); border-radius: 2vh; overflow: hidden; display: block; box-shadow: 0 0 9vh 2vh #000; transition: all 187ms ease; } #admin-image img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center; } #admin-image i { position: absolute; top: 1vh; right: 1vh; font-size: 3vh; color: var(--glow); transition: all 187ms ease; } #admin-image i:hover { color: var(--main); cursor: pointer; } /* ****** ****** ****** */ /* ****** WARNED ****** */ /* ****** ****** ****** */ #admin-warned { position: fixed; width: 100vw; height: 100vh; margin: 0; top: 0; left: 0; background: var(--soft); display: none; align-items: center; justify-content: center; transition: all 187ms ease; } #warned-box { width: 30vh; height: 30vh; padding: 1vh; background: linear-gradient(60deg, var(--background2)); color: #FFF; border-radius: 2vh; overflow-x: hidden; overflow-y: auto; transition: all 187ms ease; } #warned-box i { width: 100%; margin: .25vh 0 .75vh 0; font-size: 5vh; text-align: center; color: var(--main); filter: drop-shadow(0 0 2vh var(--glow)); } #warned-box h1 { width: 100%; margin: 0; font-family: 'Calibri', sans-serif; font-size: 4vh; font-weight: bolder; text-align: center; line-height: 4vh; color: var(--main); filter: drop-shadow(0 0 2vh var(--glow)); } #warned-box h3 { width: 100%; height: 40%; margin: 1vh 0 0 0; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; text-align: center; color: var(--main); } #warned-box h3 span { color: #FFF; } #warned-box h4 { width: 100%; margin: 2vh 0 0 0; font-family: 'Calibri', sans-serif; font-size: 1.5vh; font-weight: normal; text-align: center; color: #FFFFFF90; } #warned-timeline { width: 100%; height: .75vh; margin: .5vh 0 0 0; background: #FFFFFF09; border-radius: .5vh; overflow: hidden; } #warned-timeline span { width: 50%; height: 100%; margin: 0; float: left; background: var(--main); transition: all 9s linear; } /* ****** ******** ****** */ /* ****** SPECTATE ****** */ /* ****** ******** ****** */ #admin-spectate { position: absolute; width: 23vh; height: auto; top: 50%; left: -26vh; padding: 1vh; transform: translateY(-50%); background: linear-gradient(60deg, var(--background2)); color: #FFF; border-radius: 1vh; overflow-x: hidden; overflow-y: auto; transition: all 187ms ease; } #spectate-name { width: 100%; margin: 0 0 .25vh 0; font-family: 'Calibri', sans-serif; font-size: 3vh; font-weight: bold; line-height: 3vh; color: var(--main); filter: drop-shadow(0 0 2vh var(--glow)); } #spectate-name span { margin-left: 2%; font-weight: normal; color: #FFFFFF60; filter: none; } .spectate-data { width: 100%; margin: .5vh 0 0 0; float: left; font-size: 1.5vh; line-height: 2vh; color: var(--main); filter: drop-shadow(0 0 1vh var(--glow)); } .spectate-data span { margin-left: 2%; font-family: 'Calibri', sans-serif; font-weight: normal; text-transform: capitalize; color: #FFF; filter: none; } .spectate-data span span { margin-left: 1%; color: #FFFFFF90; } #spectate-job, #spectate-group, #spectate-coords { margin-top: .75vh; } .spectate-button { margin-top: 1vh; } .spectate-button b { width: 2.5vh; height: 2.5vh; margin: 0; float: left; background: #FFFFFF09; color: var(--main); border-radius: .5vh; display: flex; align-items: center; justify-content: center; font-family: 'Calibri', sans-serif; font-size: 2vh; font-weight: bold; } .spectate-button b i { font-size: 1.5vh; } .spectate-button span { line-height: 2.5vh; } /* ****** ****** ****** */ /* ****** NOCLIP ****** */ /* ****** ****** ****** */ #admin-noclip { position: absolute; width: 16vh; height: 6vh; top: -9vh; left: 50%; padding: .5vh; transform: translateX(-50%); background: linear-gradient(60deg, var(--background2)); color: #FFF; border-radius: 1vh; overflow: hidden; transition: all 187ms ease; } #admin-noclip h4 { width: 100%; height: 2vh; margin: 0; float: left; font-family: 'Calibri', sans-serif; font-size: 1.75vh; font-weight: normal; line-height: 2vh; color: #FFFFFF90; } #admin-noclip i { width: 4vh; height: 4vh; margin: 0; float: left; font-size: 2.75vh; text-align: center; line-height: 4vh; color: var(--main); filter: drop-shadow(0 0 2vh var(--glow)); } #admin-noclip h2 { width: auto; height: 4vh; margin: 0 0 0 2%; float: left; font-family: 'Calibri', sans-serif; font-size: 2.75vh; font-weight: bold; line-height: 4vh; color: var(--main); filter: drop-shadow(0 0 2vh var(--glow)); } /* ****** ****** ****** */ /* ****** COORDS ****** */ /* ****** ****** ****** */ #admin-coords { position: absolute; width: 23vh; height: 15vh; top: 50%; left: -26vh; padding: .5vh 1vh; transform: translateY(-50%); background: linear-gradient(60deg, var(--background2)); color: #FFF; border-radius: 1vh; overflow-x: hidden; overflow-y: auto; transition: all 187ms ease; } #admin-coords h1 { width: 100%; margin: 0 0 3% 0; font-family: 'Calibri', sans-serif; font-size: 3vh; font-weight: bold; line-height: 3vh; color: var(--main); filter: drop-shadow(0 0 2vh var(--glow)); } #admin-coords h3 { width: 100%; height: auto; margin: .5vh 0; font-family: 'Calibri', sans-serif; font-size: 1.75vh; } #admin-coords h3 b { width: 2.25vh; height: 2.25vh; float: left; background: #FFFFFF09; color: var(--main); border-radius: .5vh; font-weight: bold; text-align: center; line-height: 2.25vh; filter: drop-shadow(0 0 1.5vh var(--glow)); } #admin-coords h3 span { margin-left: 1vh; font-weight: normal; color: #FFFFFF90; filter: none; } /* ****** ********* ****** */ /* ****** JUMPSCARE ****** */ /* ****** ********* ****** */ #admin-jumpscare { position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; z-index: -1; display: none; } #admin-jumpscare img { width: 100%; height: 100%; margin: 0; float: left; object-fit: cover; object-position: center; } #admin-jumpscare video { width: 100%; height: 100%; margin: 0; float: left; object-fit: cover; object-position: center; } /* ****** ********* ****** */ /* ****** DOT ****** */ /* ****** ********* ****** */ #admin-dot { position: absolute; width: .4vh; height: .4vh; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; background: #FFF; border-radius: 50%; border: .1vh solid #000; display: none; } /* ****** ********* ****** */ /* ****** REDESIGN ****** */ /* ****** ********* ****** */ /* ****** SWITCH ****** */ .switch-box { width: 100%; height: 2.25vh; margin: 1% 0; float: left; } .switch { position: relative; width: 3.75vh; height: 2.25vh; margin: 0; float: left; } .switch input { opacity: 0; width: 0; height: 0; } .switch input[disabled] ~ .switch-slider:before { background: #FFFFFF60; transition: .2s; } .switch-slider { position: absolute; top: 0; right: 0; bottom: 0; left: 0; float: left; background: #FFFFFF10; border-radius: .5vh; transition: .4s; cursor: pointer; } .switch-slider:before { position: absolute; content: ""; height: 1.5vh; width: 1.5vh; left: .375vh; bottom: .375vh; background: var(--main); border-radius: .25vh; transition: .4s; } .switch-text { width: auto; height: 2.25vh; margin: 0 0 0 1vh; float: left; font-family: 'Calibri', sans-serif; line-height: 2.25vh; color: #FFFFFF90; transition: all .2s ease; } input:checked + .switch-slider { background: var(--main); } input:checked + .switch-slider:before { background: #FFFFFF; } input:checked ~ .switch-text { color: var(--main); } input:checked + .switch-slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(1.45vh); } /* ****** BUTTON HOVER ****** */ button { border: none; outline: none; transition: all 187ms ease; font-family: 'Calibri', sans-serif; } button[disabled], button[active=false] { color: #FFFFFF60 !important; cursor: not-allowed !important; } button:not([disabled]):hover, button:not([active='false']):hover { cursor: pointer; } /* ****** INPUT ARROWS ****** */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ****** SCROLLBAR ****** */ ::-webkit-scrollbar { width: .6vh; height: .6vh; } ::-webkit-scrollbar-track { border-radius: .6vh; } ::-webkit-scrollbar-thumb { background: var(--glow); border-radius: .6vh; } ::-webkit-scrollbar-thumb:hover { background: var(--main); } /* ****** TRANSITION ****** */ .notransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; }