Anomaly Class Bar Source Css
您正在查詢的標題為:關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:人物檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您現在最好給我停下來
本頁面內包含基金會維基內部使用的模板。
嚴禁任何人員在未經網站行政人員
之授權下修訂本頁面
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap&subset=latin-ext'); :root { --five-color: 196,2,51; --four-color: 255,109,0; --three-color: 255,211,0; --two-color: 0,135,189; --one-color: 0,159,107; } #page-title { display: none; } .anom-bar-container, .anom-bar-container * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-family: var(--title-font, 'Roboto', sans-serif); } .anom-bar-container { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; } .anom-bar { display: -ms-grid; display: grid; grid-template-areas: "top-box" "bottom-box"; width: 100%; } .anom-bar > .top-box { -ms-grid-row: 1; -ms-grid-column: 1; display: -ms-grid; display: grid; grid-area: top-box; grid-template-areas: "top-left-box top-center-box top-right-box"; width: 100%; -ms-grid-columns: auto 1fr calc(5vw + 5rem); grid-template-columns: auto 1fr -webkit-calc(5vw + 5rem); grid-template-columns: auto 1fr -moz-calc(5vw + 5rem); grid-template-columns: auto 1fr calc(5vw + 5rem); -ms-grid-rows: 1fr; grid-template-rows: 1fr; font-weight: 600; text-transform: uppercase; justify-items: stretch; padding-bottom: 1rem; } .top-box .top-left-box { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: top-left-box; } .top-left-box > .item { font-size: -webkit-calc(12px + (20 - 12) * ( (100vw - 300px) / ( 1920 - 960) )); font-size: -moz-calc(12px + (20 - 12) * ( (100vw - 300px) / ( 1920 - 960) )); font-size: calc(12px + (20 - 12) * ( (100vw - 300px) / ( 1920 - 960) )); } .top-left-box > .number { font-size: -webkit-calc(25px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) )); font-size: -moz-calc(25px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) )); font-size: calc(25px + (50 - 25) * ( (100vw - 300px) / ( 1920 - 300) )); } .top-box .top-center-box { -ms-grid-row: 1; -ms-grid-column: 2; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; grid-area: top-center-box; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; margin: 0 1rem; } .top-center-box > div { background-color: rgb(0,0,0); height: 0.5rem; width: 100%; margin: 0.125rem; display: none; } .anom-bar-container.american .top-center-box > div { background-image: -webkit-repeating-linear-gradient(65deg, rgb(178,34,52), rgb(252,252,252) 45%, rgb(252,252,252) 55%, rgb(60,59,110) 100%); background-image: -moz-repeating-linear-gradient(65deg, rgb(178,34,52), rgb(252,252,252) 45%, rgb(252,252,252) 55%, rgb(60,59,110) 100%); background-image: -o-repeating-linear-gradient(65deg, rgb(178,34,52), rgb(252,252,252) 45%, rgb(252,252,252) 55%, rgb(60,59,110) 100%); background-image: repeating-linear-gradient(25deg, rgb(178,34,52), rgb(252,252,252) 45%, rgb(252,252,252) 55%, rgb(60,59,110) 100%); background-attachment: scroll; } .anom-bar-container.clear-1 .top-center-box > div { background-color: rgb(0,159,107); background-color: rgb(var(--one-color)); } .anom-bar-container.clear-2 .top-center-box > div { background-color: rgb(0,135,189); background-color: rgb(var(--two-color)); } .anom-bar-container.clear-3 .top-center-box > div { background-color: rgb(255,211,0); background-color: rgb(var(--three-color)); } .anom-bar-container.clear-4 .top-center-box > div { background-color: rgb(255,109,0); background-color: rgb(var(--four-color)); } .anom-bar-container.clear-5 .top-center-box > div { background-color: rgb(196,2,51); background-color: rgb(var(--five-color)); } .anom-bar-container.clear-1 .top-center-box > .bar-one, .anom-bar-container.clear-2 .top-center-box > .bar-one, .anom-bar-container.clear-3 .top-center-box > .bar-one, .anom-bar-container.clear-4 .top-center-box > .bar-one, .anom-bar-container.clear-5 .top-center-box > .bar-one, .anom-bar-container.clear-6 .top-center-box > .bar-one { display: block; } .anom-bar-container.clear-2 .top-center-box > .bar-two, .anom-bar-container.clear-3 .top-center-box > .bar-two, .anom-bar-container.clear-4 .top-center-box > .bar-two, .anom-bar-container.clear-5 .top-center-box > .bar-two, .anom-bar-container.clear-6 .top-center-box > .bar-two { display: block; } .anom-bar-container.clear-3 .top-center-box > .bar-three, .anom-bar-container.clear-4 .top-center-box > .bar-three, .anom-bar-container.clear-5 .top-center-box > .bar-three, .anom-bar-container.clear-6 .top-center-box > .bar-three { display: block; } .anom-bar-container.clear-4 .top-center-box > .bar-four, .anom-bar-container.clear-5 .top-center-box > .bar-four, .anom-bar-container.clear-6 .top-center-box > .bar-four { display: block; } .anom-bar-container.clear-5 .top-center-box > .bar-five, .anom-bar-container.clear-6 .top-center-box > .bar-five { display: block; } .anom-bar-container.clear-6 .top-center-box > .bar-six { display: block; } .anom-bar-container.clear-6 .anom-bar > .top-box { -ms-grid-columns: auto 1fr calc(5vw + 8rem); grid-template-columns: auto 1fr -webkit-calc(5vw + 8rem); grid-template-columns: auto 1fr -moz-calc(5vw + 8rem); grid-template-columns: auto 1fr calc(5vw + 8rem); padding-bottom: 1.15em; } .anom-bar-container.clear-6 .top-center-box > div { background-color: rgb(133, 0, 5); background-color: rgb(var(--swatch-primary, 133, 0, 5)); background-image: url("http://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/galactic.jpg"); background-attachment: fixed; background-size: contain; background-blend-mode: overlay; } .top-box .top-right-box { -ms-grid-row: 1; -ms-grid-column: 3; display: -ms-grid; display: grid; grid-area: top-right-box; grid-template-areas: "level" "clearance"; -ms-grid-rows: (1fr)[2]; grid-template-rows: repeat(2, 1fr); } .top-right-box > .level { -ms-grid-row: 1; -ms-grid-column: 1; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; grid-area: level; font-size: 2.5em; line-height: 0.5; } .top-right-box > .clearance { -ms-grid-row: 2; -ms-grid-column: 1; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; width: 100%; height: 100%; grid-area: clearance; font-size: -webkit-calc(12px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) )); font-size: -moz-calc(12px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) )); font-size: calc(12px + (15 - 12) * ( (100vw - 400px) / ( 1920 - 960) )); line-height: 1.5; white-space: nowrap; } .top-right-box > .clearance::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .anom-bar-container.clear-6 .top-right-box > .clearance::before { content: "Cosmic Top-Secret"; } .anom-bar-container.clear-5 .top-right-box > .clearance::before { content: "Top-Secret"; } .anom-bar-container.clear-4 .top-right-box > .clearance::before { content: "Secret"; } .anom-bar-container.clear-3 .top-right-box > .clearance::before { content: "Confidential"; } .anom-bar-container.clear-2 .top-right-box > .clearance::before { content: "Restricted"; } .anom-bar-container.clear-1 .top-right-box > .clearance::before { content: "Unrestricted"; } .anom-bar > .bottom-box { -ms-grid-row: 2; -ms-grid-column: 1; display: -ms-grid; display: grid; grid-area: bottom-box; grid-template-areas: "text-part diamond-part" "text-part diamond-part"; -ms-grid-rows: 1fr 0.5rem 1fr; grid-template-rows: 1fr 1fr; -ms-grid-columns: 1fr 0.5rem 6rem; grid-template-columns: 1fr 6rem; grid-gap: 0.5rem; width: 100%; height: 6rem; font-weight: 600; -webkit-box-shadow: 0 -0.5rem 0 0 rgb(12, 12, 12); -moz-box-shadow: 0 -0.5rem 0 0 rgb(12, 12, 12); box-shadow: 0 -0.5rem 0 0 rgb(12, 12, 12); -webkit-box-shadow: 0 -0.5rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); -moz-box-shadow: 0 -0.5rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); box-shadow: 0 -0.5rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); margin-top: -0.5rem; padding-top: 0.25rem; } .bottom-box > .text-part { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; display: -ms-grid; display: grid; height: 6rem; grid-area: text-part; grid-template-areas: "main-class disrupt-class" "main-class risk-class"; -ms-grid-rows: 1fr 0.25rem 1fr; grid-template-rows: 1fr 1fr; -ms-grid-columns: auto 0.25rem 1fr; grid-template-columns: 3fr 2fr; grid-gap: 0.25rem; text-transform: uppercase; -webkit-box-pack: stretch; -webkit-justify-content: stretch; -moz-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; -webkit-box-align: stretch; -webkit-align-items: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .text-part div { padding: 0 0.125rem; margin: 0 0 0 0.25rem; position: relative; } .text-part > .main-class { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; position: relative; grid-area: main-class; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-shadow: 0.25rem 0 0 0 rgba(0,0,0,0); -moz-box-shadow: 0.25rem 0 0 0 rgba(0,0,0,0); box-shadow: 0.25rem 0 0 0 rgba(0,0,0,0); } .anom-bar-container:not(.esoteric) .text-part > .main-class { padding-right: 3.5rem; } .anom-bar-container.esoteric .text-part > .main-class { padding-right: 2rem; } .text-part > .main-class::before { content: ""; position: absolute; top: -webkit-calc(50% - 2.25rem); top: -moz-calc(50% - 2.25rem); top: calc(50% - 2.25rem); right: 0.5rem; width: 3.53125rem; height: 3.53125rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 0.25rem solid rgb(12, 12, 12); border: 0.25rem solid rgb(var(--black-monochrome, 12, 12, 12)); background-color: rgb(252, 252, 252); background-color: rgb(var(--white-monochrome, 252, 252, 252)); -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; background-position: center center; } .anom-bar-container.esoteric .text-part > .main-class::before { top: 0.5rem; right: 1.25rem; width: 5rem; -webkit-border-radius: -webkit-calc(3.53125rem / 2); -moz-border-radius: -moz-calc(3.53125rem / 2); border-radius: calc(3.53125rem / 2); background-color: rgb(252, 252, 252); background-color: rgb(var(--white-monochrome, 252, 252, 252)); border-color: rgb(var(--white-monochrome, 252, 252, 252)); -webkit-filter: invert(1); filter: invert(1); background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/esoteric-icon.svg"); -webkit-background-size: 75% 75%; -moz-background-size: 75% 75%; -o-background-size: 75% 75%; background-size: 75% 75%; background-repeat: no-repeat; background-position: left -10px center; } .anom-bar-container.esoteric .text-part > .main-class::after { content: ""; position: absolute; top: 0.5rem; right: 0.25rem; width: 3.53125rem; height: 3.53125rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 0.25rem solid rgb(12, 12, 12); border: 0.25rem solid rgb(var(--black-monochrome, 12, 12, 12)); background-color: rgb(252, 252, 252); background-color: rgb(var(--white-monochrome, 252, 252, 252)); -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; background-position: center center; } .anom-bar-container.{$secondary-class} .text-part > .main-class::after { background-image: url("{$secondary-icon}"); } .anom-bar-container.explained .text-part > .main-class::before, .anom-bar-container.pending .text-part > .main-class::before, .anom-bar-container.neutralized .text-part > .main-class::before, .anom-bar-container.neutralised .text-part > .main-class::before { display:none; } .anom-bar-container.keter .text-part > .main-class::before { background-color: rgb(196,2,51); background-color: rgb(var(--five-color)); background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/keter-icon.svg"); } .anom-bar-container.euclid .text-part > .main-class::before { background-color: rgb(255,211,0); background-color: rgb(var(--three-color)); background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/euclid-icon.svg"); } .anom-bar-container.safe .text-part > .main-class::before { background-color: rgb(0,159,107); background-color: rgb(var(--one-color)); background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/safe-icon.svg"); } .text-part > .main-class > div { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .anom-bar-container.esoteric .text-part > .main-class > .second-class > .class-text { font-size: -webkit-calc( 6px + (11 - 6) * ( (100vw - 400px) / ( 800 - 400) )); font-size: -moz-calc( 6px + (11 - 6) * ( (100vw - 400px) / ( 800 - 400) )); font-size: calc( 6px + (11 - 6) * ( (100vw - 400px) / ( 800 - 400) )); position: relative; } .anom-bar-container:not(.esoteric) .text-part > .main-class > .contain-class > .class-text { font-size: -webkit-calc(10px + (18 - 10) * ( (100vw - 400px) / ( 800 - 400) )); font-size: -moz-calc(10px + (18 - 10) * ( (100vw - 400px) / ( 800 - 400) )); font-size: calc(10px + (18 - 10) * ( (100vw - 400px) / ( 800 - 400) )); } .anom-bar-container:not(.esoteric) .text-part > .main-class > .second-class { display: none; } .text-part > .disrupt-class { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: disrupt-class; } .text-part > .risk-class { -ms-grid-row: 3; -ms-grid-column: 3; grid-area: risk-class; } .text-part > .disrupt-class, .text-part > .risk-class { overflow: hidden; } .anom-bar-container.esoteric .text-part .main-class { background-color: rgba(66, 66, 72 ,0.15); background-color: rgba(var(--gray-monochrome, 66, 66, 72),0.15); border-left: 0.75rem solid rgba(66, 66, 72 ,1); border-left: 0.75rem solid rgba(var(--gray-monochrome, 66, 66, 72),1); } .anom-bar-container.neutralized .text-part .main-class, .anom-bar-container.neutralised .text-part .main-class { background-color: rgba(66, 66, 72 ,0.15); background-color: rgba(var(--gray-monochrome, 66, 66, 72),0.15); border-left: 0.75rem solid rgba(66, 66, 72 ,1); border-left: 0.75rem solid rgba(var(--gray-monochrome, 66, 66, 72),1); } .anom-bar-container.pending .text-part .main-class { background-color: rgba(12, 12, 12 ,0.15); background-color: rgba(var(--black-monochrome, 12, 12, 12),0.15); border-left: 0.75rem solid rgba(12, 12, 12 ,1); border-left: 0.75rem solid rgba(var(--black-monochrome, 12, 12, 12),1); } .anom-bar-container.explained .text-part .main-class { background-color: rgba(252, 252, 252 ,0.15); background-color: rgba(var(--white-monochrome, 252, 252, 252),0.15); border-left: 0.75rem solid rgba(12, 12, 12 ,1); border-left: 0.75rem solid rgba(var(--black-monochrome, 12, 12, 12),1); } .anom-bar-container.keter .text-part .main-class, .anom-bar-container.amida .text-part .disrupt-class, .anom-bar-container.critical .text-part .risk-class { background-color: rgba(196,2,51,0.15); background-color: rgba(var(--five-color),0.15); border-left: 0.5rem solid rgba(196,2,51,1); border-left: 0.5rem solid rgba(var(--five-color),1); } .anom-bar-container.ekhi .text-part .disrupt-class, .anom-bar-container.danger .text-part .risk-class { background-color: rgba(255,109,0,0.15); background-color: rgba(var(--four-color),0.15); border-left: 0.5rem solid rgba(255,109,0,1); border-left: 0.5rem solid rgba(var(--four-color),1); } .anom-bar-container.euclid .text-part .main-class, .anom-bar-container.keneq .text-part .disrupt-class, .anom-bar-container.warning .text-part .risk-class { border-left: 0.5rem solid rgba(255,211,0,1); border-left: 0.5rem solid rgba(var(--three-color),1); background-color: rgba(255,211,0,0.15); background-color: rgba(var(--three-color),0.15); } .anom-bar-container.vlam .text-part .disrupt-class, .anom-bar-container.caution .text-part .risk-class { border-left: 0.5rem solid rgba(0,135,189,1); border-left: 0.5rem solid rgba(var(--two-color),1); background-color: rgba(0,135,189,0.15); background-color: rgba(var(--two-color),0.15); } .anom-bar-container.safe .text-part .main-class, .anom-bar-container.dark .text-part .disrupt-class, .anom-bar-container.notice .text-part .risk-class { background-color: rgba(0,159,107,0.15); background-color: rgba(var(--one-color),0.15); border-left: 0.5rem solid rgba(0,159,107,1); border-left: 0.5rem solid rgba(var(--one-color),1); } .anom-bar-container.neutralized .text-part, .anom-bar-container.neutralised .text-part, .anom-bar-container.pending .text-part, .anom-bar-container.explained .text-part { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .text-part .disrupt-class::after, .text-part .risk-class::after, .text-part .disrupt-class::before, .text-part .risk-class::before { content: ""; position: absolute; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 0.25rem solid rgb(12, 12, 12); border: 0.25rem solid rgb(var(--black-monochrome, 12, 12, 12)); width: 2.5rem; height: 2.5rem; top: -webkit-calc(50% - 1.5rem); top: -moz-calc(50% - 1.5rem); top: calc(50% - 1.5rem); font-size: 2em; background-color: rgb(252, 252, 252); background-color: rgb(var(--white-monochrome, 252, 252, 252)); -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; background-position: center center; } .text-part .disrupt-class::after, .text-part .risk-class::after { right: 0.15em; } .text-part .disrupt-class::before, .text-part .risk-class::before { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; background-color: rgb(12, 12, 12); background-color: rgb(var(--black-monochrome, 12, 12, 12)); width: 3rem; height: 3rem; top: -webkit-calc(50% - 1.5rem); top: -moz-calc(50% - 1.5rem); top: calc(50% - 1.5rem); border: 0; right: 1rem; text-align: left; font-size: 1em; padding-left: 0.5rem; color: rgb(252, 252, 252); color: rgb(var(--white-monochrome, 252, 252, 252)); } .anom-bar-container.amida .text-part .disrupt-class::before, .anom-bar-container.critical .text-part .risk-class::before { content: "5"; } .anom-bar-container.ekhi .text-part .disrupt-class::before, .anom-bar-container.danger .text-part .risk-class::before { content: "4"; } .anom-bar-container.keneq .text-part .disrupt-class::before, .anom-bar-container.warning .text-part .risk-class::before { content: "3"; } .anom-bar-container.vlam .text-part .disrupt-class::before, .anom-bar-container.caution .text-part .risk-class::before { content: "2"; } .anom-bar-container.dark .text-part .disrupt-class::before, .anom-bar-container.notice .text-part .risk-class::before { content: "1"; } .anom-bar-container.amida .text-part .disrupt-class::after, .anom-bar-container.critical .text-part .risk-class::after { background-color: rgb(196,2,51); background-color: rgb(var(--five-color)); } .anom-bar-container.amida .text-part .disrupt-class::after { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/amida-icon.svg"); } .anom-bar-container.critical .text-part .risk-class::after { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/critical-icon.svg"); } .anom-bar-container.ekhi .text-part .disrupt-class::after, .anom-bar-container.danger .text-part .risk-class::after { background-color: rgb(255,109,0); background-color: rgb(var(--four-color)); } .anom-bar-container.ekhi .text-part .disrupt-class::after { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/ekhi-icon.svg"); } .anom-bar-container.danger .text-part .risk-class::after { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/danger-icon.svg"); } .anom-bar-container.keneq .text-part .disrupt-class::after, .anom-bar-container.warning .text-part .risk-class::after { background-color: rgb(255,211,0); background-color: rgb(var(--three-color)); } .anom-bar-container.keneq .text-part .disrupt-class::after { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/keneq-icon.svg"); } .anom-bar-container.warning .text-part .risk-class::after { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/warning-icon.svg"); } .anom-bar-container.vlam .text-part .disrupt-class::after, .anom-bar-container.caution .text-part .risk-class::after { background-color: rgb(0,135,189); background-color: rgb(var(--two-color)); } .anom-bar-container.vlam .text-part .disrupt-class::after { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/vlam-icon.svg"); } .anom-bar-container.caution .text-part .risk-class::after { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/caution-icon.svg"); } .anom-bar-container.dark .text-part .disrupt-class::after, .anom-bar-container.notice .text-part .risk-class::after { background-color: rgb(0,159,107); background-color: rgb(var(--one-color)); } .anom-bar-container.dark .text-part .disrupt-class::after { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/dark-icon.svg"); } .anom-bar-container.notice .text-part .risk-class::after { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/notice-icon.svg"); } .text-part .main-class { border-width: 1em !important; } .text-part > div .class-category { position: relative; font-weight: 500; left: 0; } .anom-bar-container.esoteric .contain-class > .class-category { max-width: 55% !important; } .anom-bar-container.explained .second-class, .anom-bar-container.explained .disrupt-class, .anom-bar-container.explained .risk-class, .anom-bar-container.explained .danger-diamond > .quadrants > .left-quad, .anom-bar-container.explained .danger-diamond > .quadrants > .right-quad, .anom-bar-container.explained .danger-diamond > .left-icon, .anom-bar-container.explained .danger-diamond > .right-icon, .anom-bar-container.neutralized .second-class, .anom-bar-container.neutralized .disrupt-class, .anom-bar-container.neutralized .risk-class, .anom-bar-container.neutralized .danger-diamond > .quadrants > .left-quad, .anom-bar-container.neutralized .danger-diamond > .quadrants > .right-quad, .anom-bar-container.neutralized .danger-diamond > .left-icon, .anom-bar-container.neutralized .danger-diamond > .right-icon, .anom-bar-container.neutralised .second-class, .anom-bar-container.neutralised .disrupt-class, .anom-bar-container.neutralised .risk-class, .anom-bar-container.neutralised .danger-diamond > .quadrants > .left-quad, .anom-bar-container.neutralised .danger-diamond > .quadrants > .right-quad, .anom-bar-container.neutralised .danger-diamond > .left-icon, .anom-bar-container.neutralised .danger-diamond > .right-icon, .anom-bar-container.pending .second-class, .anom-bar-container.pending .disrupt-class, .anom-bar-container.pending .risk-class, .anom-bar-container.pending .danger-diamond > .quadrants > .left-quad, .anom-bar-container.pending .danger-diamond > .quadrants > .right-quad, .anom-bar-container.pending .danger-diamond > .left-icon, .anom-bar-container.pending .danger-diamond > .right-icon { display: none; } .text-part .contain-class, .text-part .second-class, .text-part .disrupt-class, .text-part .risk-class { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; line-height: 1; } .text-part .contain-class > div, .text-part .second-class > div, .text-part .disrupt-class > div, .text-part .risk-class > div { width: 100%; } .text-part > div > .class-category, .anom-bar-container.esoteric .text-part > .main-class > .contain-class > .class-category { font-size: 0.75em; } .anom-bar-container.esoteric .text-part > .main-class > .contain-class > .class-text, .text-part > .disrupt-class > .class-text, .text-part > .risk-class > .class-text { font-size: -webkit-calc( 8px + (12 - 8) * ( (100vw - 400px) / ( 800 - 400) )); font-size: -moz-calc( 8px + (12 - 8) * ( (100vw - 400px) / ( 800 - 400) )); font-size: calc( 8px + (12 - 8) * ( (100vw - 400px) / ( 800 - 400) )); } .bottom-box > .diamond-part { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 3; width: 100%; padding-top: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; grid-area: diamond-part; padding-left: 1rem; -webkit-box-shadow: -0.5rem 0 0 0 rgb(12, 12, 12); -moz-box-shadow: -0.5rem 0 0 0 rgb(12, 12, 12); box-shadow: -0.5rem 0 0 0 rgb(12, 12, 12); -webkit-box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); -moz-box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); } .danger-diamond { position: absolute; width: 95%; height: 95%; top: 2.5%; left: 5%; } .danger-diamond a { color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 3; } .danger-diamond br { display: none; } .danger-diamond > .arrows { position: absolute; width: 100%; height: 100%; z-index: 1; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 160' xml:space='preserve'%3E%3Cpath fill='%23010101' d='M136.1,133.3l23.9-23.9V51.2l-24-24l19.1-19.1l4.9,4.9l0-12.9l-12.9,0l4.9,4.9L133,24.2l-24-24H51l-24,24 L8,5.2l4.9-4.9L0,0.2l0,12.9l4.9-4.9L24,27.3l-24,24v58.2l23.9,23.9l-19,19L0,147.3l0,12.9l12.9,0L8,155.3l19-19l23.9,23.9h58.4 l23.9-23.9l19,19l-4.9,4.9l12.9,0l0-12.9l-4.9,4.9L136.1,133.3z M155.7,53v54.6l-22.6,22.6l-50-50L133,30.3L155.7,53z M52.8,4.5 h54.4l22.7,22.7L80,77.2L30.1,27.3L52.8,4.5z M4.3,107.6V53L27,30.3L77,80.2l-50,50L4.3,107.6z M107.4,155.9H52.6L30,133.3l50-50 l50,50L107.4,155.9z'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; } .danger-diamond > .octagon { width: 100%; height: 100%; position: absolute; text-align: center; z-index: 0; -webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); } .danger-diamond > .quadrants { position: absolute; width: 96%; height: 96%; top: 0; left: 0; } .danger-diamond > .quadrants > div { width: 67.5%; padding-bottom: 50%; position: absolute; top: 2%; left: 16.25%; background-color: rgb(252, 252, 252); background-color: rgb(var(--white-monochrome, 252, 252, 252)); -webkit-clip-path: polygon(22% 0, 77% 0, 100% 31%, 50% 100%, 0 31%); clip-path: polygon(22% 0, 77% 0, 100% 31%, 50% 100%, 0 31%); -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; } .danger-diamond > .quadrants > .left-quad { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .danger-diamond > .quadrants > .right-quad { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .danger-diamond > .quadrants > .bottom-quad { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .danger-diamond > .quadrants > .bottom-quad.none { background-color: rgb(252, 252, 252 ,0.25); background-color: rgb(var(--white-monochrome, 252, 252, 252),0.25); } .danger-diamond > .quadrants > .top-quad.pending { background-color: rgb(12, 12, 12 ,0.25); background-color: rgb(var(--black-monochrome, 12, 12, 12),0.25); } .danger-diamond > .quadrants > .top-quad.neutralized, .danger-diamond > .quadrants > .top-quad.neutralised { background-color: rgb(66, 66, 72 ,0.25); background-color: rgb(var(--gray-monochrome, 66, 66, 72),0.25); } .danger-diamond > .quadrants > .top-quad.explained { background-color: rgb(252, 252, 252 ,0.25); background-color: rgb(var(--white-monochrome, 252, 252, 252),0.25); } .anom-bar-container.esoteric .danger-diamond > .quadrants > .top-quad { background-color: rgb(66, 66, 72 ,0.15); background-color: rgb(var(--gray-monochrome, 66, 66, 72),0.15); } .anom-bar-container.keter .danger-diamond > .quadrants > .top-quad, .anom-bar-container.amida .danger-diamond > .quadrants > .left-quad, .anom-bar-container.critical .danger-diamond > .quadrants > .right-quad { background-color:rgba(196,2,51,0.25); background-color: rgb(var(--five-color),0.25); } .anom-bar-container.ekhi .danger-diamond > .quadrants > .left-quad, .anom-bar-container.danger .danger-diamond > .quadrants > .right-quad { background-color:rgba(255,109,0,0.25); background-color: rgb(var(--five-color),0.25); } .anom-bar-container.euclid .danger-diamond > .quadrants > .top-quad, .anom-bar-container.keneq .danger-diamond > .quadrants > .left-quad, .anom-bar-container.warning .danger-diamond > .quadrants > .right-quad { background-color:rgba(255,211,0,0.25); background-color: rgb(var(--three-color),0.25); } .anom-bar-container.vlam .danger-diamond > .quadrants > .left-quad, .anom-bar-container.caution .danger-diamond > .quadrants > .right-quad { background-color:rgba(0,135,189,0.25); background-color: rgb(var(--two-color),0.25); } .anom-bar-container.safe .danger-diamond > .quadrants > .top-quad, .anom-bar-container.dark .danger-diamond > .quadrants > .left-quad, .anom-bar-container.notice .danger-diamond > .quadrants > .right-quad { background-color:rgba(0,159,107,0.25); background-color: rgb(var(--one-color),0.25); } .anom-bar-container.clear-5 .danger-diamond > .center-circle::before { content: "5"; } .anom-bar-container.clear-4 .danger-diamond > .center-circle::before { content: "4"; } .anom-bar-container.clear-3 .danger-diamond > .center-circle::before { content: "3"; } .anom-bar-container.clear-2 .danger-diamond > .center-circle::before { content: "2"; } .anom-bar-container.clear-1 .danger-diamond > .center-circle::before { content: "1"; } .danger-diamond > .top-icon, .danger-diamond > .right-icon, .danger-diamond > .left-icon, .danger-diamond > .bottom-icon { position: absolute; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 33%; height: 33%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 0.1875rem solid rgb(12, 12, 12); border: 0.1875rem solid rgb(var(--black-monochrome, 12, 12, 12)); overflow: hidden; z-index: 2; } .danger-diamond > .top-icon { top: 0.25rem; left: 33.5%; } .danger-diamond > .right-icon { right: 0.25rem; top: 33.5%; } .danger-diamond > .left-icon { left: 0.25rem; top: 33.5%; } .danger-diamond > .bottom-icon { bottom: 0.25rem; left: 33.5%; } .anom-bar-container.neutralized .danger-diamond > .top-icon, .anom-bar-container.neutralised .danger-diamond > .top-icon, .anom-bar-container.pending .danger-diamond > .top-icon, .anom-bar-container.explained .danger-diamond > .top-icon { width: 65%; height: 65%; top: 17.5%; left: 17.5%; border-width: 0.3625rem; } .anom-bar-container.pending .danger-diamond > .top-icon { background-color: rgb(var(--black-monochrome, 12, 12, 12)); } .anom-bar-container:not(.esoteric) .danger-diamond > .bottom-icon { display: none; } .danger-diamond > .top-icon::before, .danger-diamond > .right-icon::before, .danger-diamond > .left-icon::before, .danger-diamond > .bottom-icon::before { content: ""; position: absolute; width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 0; left: 0; } .anom-bar-container.neutralized .danger-diamond > .top-icon, .anom-bar-container.neutralised .danger-diamond > .top-icon { background-color: rgb(252, 252, 252); background-color: rgb(var(--white-monochrome, 252, 252, 252)); } .anom-bar-container.neutralized .danger-diamond > .top-icon::before, .anom-bar-container.neutralised .danger-diamond > .top-icon::before { background-color: rgba(66, 66, 72 ,0.15); background-color: rgba(var(--gray-monochrome, 66, 66, 72),0.15); background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/neutralized-icon.svg"); -webkit-background-size: 110% 110%; -moz-background-size: 110% 110%; -o-background-size: 110% 110%; background-size: 110% 110%; background-position: center center; } .anom-bar-container.pending .danger-diamond > .top-icon::before { background-color: rgb(12, 12, 12); background-color: rgb(var(--black-monochrome, 12, 12, 12)); background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/pending-icon.svg"); } .anom-bar-container.explained .danger-diamond > .top-icon::before { background-color: rgb(252, 252, 252); background-color: rgb(var(--white-monochrome, 252, 252, 252)); background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/explained-icon.svg"); } .anom-bar-container.esoteric .danger-diamond > .top-icon::before { background-color: rgb(252, 252, 252); background-color: rgb(var(--white-monochrome, 252, 252, 252)); background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/esoteric-icon.svg"); -webkit-filter: invert(1); filter: invert(1); } .anom-bar-container.keter .danger-diamond > .top-icon::before, .anom-bar-container.amida .danger-diamond > .left-icon::before, .anom-bar-container.critical .danger-diamond > .right-icon::before { background-color: rgb(196,2,51); background-color: rgb(var(--five-color)); } .anom-bar-container.keter .danger-diamond > .top-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/keter-icon.svg"); } .anom-bar-container.amida .danger-diamond > .left-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/amida-icon.svg"); } .anom-bar-container.critical .danger-diamond > .right-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/critical-icon.svg"); } .anom-bar-container.ekhi .danger-diamond > .left-icon::before, .anom-bar-container.danger .danger-diamond > .right-icon::before { background-color: rgb(255,109,0); background-color: rgb(var(--four-color)); } .anom-bar-container.ekhi .danger-diamond > .left-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/ekhi-icon.svg"); } .anom-bar-container.danger .danger-diamond > .right-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/danger-icon.svg"); } .anom-bar-container.euclid .danger-diamond > .top-icon::before, .anom-bar-container.keneq .danger-diamond > .left-icon::before, .anom-bar-container.warning .danger-diamond > .right-icon::before { background-color: rgb(255,211,0); background-color: rgb(var(--three-color)); } .anom-bar-container.euclid .danger-diamond > .top-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/euclid-icon.svg"); } .anom-bar-container.keneq .danger-diamond > .left-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/keneq-icon.svg"); } .anom-bar-container.warning .danger-diamond > .right-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/warning-icon.svg"); } .anom-bar-container.vlam .danger-diamond > .left-icon::before, .anom-bar-container.caution .danger-diamond > .right-icon::before { background-color: rgb(0,135,189); background-color: rgb(var(--two-color)); } .anom-bar-container.vlam .danger-diamond > .left-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/vlam-icon.svg"); } .anom-bar-container.caution .danger-diamond > .right-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/caution-icon.svg"); } .anom-bar-container.safe .danger-diamond > .top-icon::before, .anom-bar-container.dark .danger-diamond > .left-icon::before, .anom-bar-container.notice .danger-diamond > .right-icon::before { background-color: rgb(0,159,107); background-color: rgb(var(--one-color)); } .anom-bar-container.safe .danger-diamond > .top-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/safe-icon.svg"); } .anom-bar-container.dark .danger-diamond > .left-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/dark-icon.svg"); } .anom-bar-container.notice .danger-diamond > .right-icon::before { background-image: url("http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/notice-icon.svg"); } .anom-bar-container.{$secondary-class} .danger-diamond > .bottom-icon::before { background-image: url("{$secondary-icon}"); background-size: contain; } @media (max-width: 960px ) { .anom-bar > .top-box { padding-bottom: 1.5em; } .anom-bar > .bottom-box { -ms-grid-columns: 1fr 0.5rem 6rem; grid-template-columns: 1fr 6rem; height: 6rem; } .anom-bar-container.esoteric .text-part > .main-class > .contain-class > .class-text, .text-part > .disrupt-class > .class-text, .text-part > .risk-class > .class-text { font-size: -webkit-calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) )); font-size: -moz-calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) )); font-size: calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) )); } .anom-bar-container.esoteric .text-part > .main-class > .contain-class > .class-text { font-size: -webkit-calc( 12px + (18 - 12) * ( (100vw - 400px) / ( 960 - 300) )); font-size: -moz-calc( 12px + (18 - 12) * ( (100vw - 400px) / ( 960 - 300) )); font-size: calc( 12px + (18 - 12) * ( (100vw - 400px) / ( 960 - 300) )); } .anom-bar-container.esoteric .text-part > .main-class > .second-class > .class-text { font-size: -webkit-calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) )); font-size: -moz-calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) )); font-size: calc( 18px + (24 - 18) * ( (100vw - 400px) / ( 960 - 300) )); } .anom-bar-container:not(.esoteric) .text-part > .main-class > .contain-class > .class-text { font-size: -webkit-calc( 20px + (40 - 20) * ( (100vw - 400px) / ( 960 - 300) )); font-size: -moz-calc( 20px + (40 - 20) * ( (100vw - 400px) / ( 960 - 300) )); font-size: calc( 20px + (40 - 20) * ( (100vw - 400px) / ( 960 - 300) )); } .text-part > .main-class { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .text-part > .disrupt-class { -ms-grid-row: 3; -ms-grid-column: 1; } .text-part > .risk-class { -ms-grid-row: 5; -ms-grid-column: 1; } } @media (max-width: 875px ) { .text-part > div { padding: 0.25rem 0; } .anom-bar-container.pending .bottom-box > .text-part, .anom-bar-container.neutralized .bottom-box > .text-part, .anom-bar-container.neutralised .bottom-box > .text-part, .anom-bar-container.explained .bottom-box > .text-part { height: 6rem; } .bottom-box > .text-part { grid-template-areas: "main-class" "disrupt-class" "risk-class"; -ms-grid-rows: 2fr 0.25rem 1fr 0.25rem 1fr; grid-template-rows: 3fr 2fr 2fr; -ms-grid-columns: 1fr; grid-template-columns: 1fr; height: 8rem; } .anom-bar > .bottom-box { -ms-grid-columns: 1fr 0.5rem 8rem; grid-template-columns: 1fr 8rem; height: 8rem; } .anom-bar-container.esoteric .text-part > .main-class::after, .text-part > .main-class::after { height: 3rem; width: 3rem; } .text-part .disrupt-class::after, .text-part .risk-class::after { height: 1.75rem; width: 1.75rem; } .anom-bar-container.esoteric .text-part > .main-class::after, .text-part > .main-class::after, .text-part .disrupt-class::after, .text-part .risk-class::after { top: -webkit-calc(50% - 1.125rem); top: -moz-calc(50% - 1.125rem); top: calc(50% - 1.125rem); border-width: 0.25rem; } .text-part > .main-class::before { height: 2.5rem; width: 2.5rem; border-width: 0.25rem; top: -webkit-calc(50% - 1.45rem); top: -moz-calc(50% - 1.45rem); top: calc(50% - 1.45rem); } .text-part .disrupt-class::before, .text-part .risk-class::before { height: 2.25rem; width: 2.25rem; top: -webkit-calc(50% - 1.125rem); top: -moz-calc(50% - 1.125rem); top: calc(50% - 1.125rem); right: 0.75rem; } .anom-bar-container.esoteric .text-part > .main-class::after { top: 0.15rem; } .anom-bar-container.esoteric .text-part > .main-class::before { top: 0.15rem; width: 5.75rem; height: 3rem; right: 1.25rem; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background-position: left -20px center; } .anom-bar-container.esoteric .contain-class > .class-category { max-width: 100% !important; } .anom-bar-container.pending .bottom-box > .text-part, .anom-bar-container.neutralized .bottom-box > .text-part, .anom-bar-container.neutralised .bottom-box > .text-part, .anom-bar-container.explained .bottom-box > .text-part { -ms-grid-rows: 1fr; grid-template-rows: 1fr; grid-template-areas: "main-class"; } .text-part .disrupt-class, .text-part .risk-class { padding-left: 0.25rem; display: -ms-grid; display: grid; -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; } .text-part .disrupt-class *, .text-part .risk-class * { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (max-width: 875px ) and (min-width: 480px ) { .anom-bar-container.pending .anom-bar > .bottom-box, .anom-bar-container.neutralized .anom-bar > .bottom-box, .anom-bar-container.neutralised .anom-bar > .bottom-box, .anom-bar-container.explained .anom-bar > .bottom-box { -ms-grid-columns: 1fr 6rem; grid-template-columns: 1fr 6rem; height: 6rem; } } @media (max-width: 480px ) { .anom-bar { position: relative; } .anom-bar > .top-box { height: 40vw; max-height: 40vw; grid-template-areas: "." "top-left-box" "top-center-box" "top-right-box" "."; -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; font-size: -webkit-calc(5px + (10 - 5) * ( (100vw - 300px) / ( 480 - 300) )); font-size: -moz-calc(5px + (10 - 5) * ( (100vw - 300px) / ( 480 - 300) )); font-size: calc(5px + (10 - 5) * ( (100vw - 300px) / ( 480 - 300) )); margin: 0 0 1rem 0; padding-left: 1em; } .top-box .top-left-box { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; line-height: 1; } .top-left-box > .item { font-size: 3em; } .top-box .top-left-box > span { width: 100%; } .top-box .top-center-box { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 100%; max-width: 48vw; margin: 0 0 0 -0.15rem; height: 2rem; } .top-center-box > div { height: 25%; margin: 0.15rem 0.15rem 0 0.15rem; } .top-box .top-right-box { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; max-width: 48vw; margin: 0 0 0 -0.15rem; height: 2rem; } .top-right-box > div { line-height: 1; } .top-right-box > .level { font-size: 4em; } .top-right-box > .clearance { line-height: 1.5; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; font-size: -webkit-calc(14px + (14 - 10) * ( (100vw - 400px) / ( 480 - 300) )); font-size: -moz-calc(14px + (14 - 10) * ( (100vw - 400px) / ( 480 - 300) )); font-size: calc(14px + (14 - 10) * ( (100vw - 400px) / ( 480 - 300) )); width: initial; height: 1.5rem; } .top-right-box > .clearance::before { line-height: 0.5; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: initial; height: initial; position: initial; } .anom-bar > .bottom-box { position: initial; -ms-grid-columns: 1fr; grid-template-columns: 1fr; height: 8rem; } .anom-bar-container:not(.esoteric) .text-part > .main-class::before { width: 2.5rem; height: 2.5rem; top: -webkit-calc(50% - 1.475rem); top: -moz-calc(50% - 1.475rem); top: calc(50% - 1.475rem); right: 0.5rem; } .text-part > div > .class-category, .anom-bar-container.esoteric .text-part > .main-class > .contain-class > .class-category { font-size: 1em; } .text-part .disrupt-class, .text-part .risk-class { font-size: 0.9em; } .text-part > .main-class::after, .text-part .disrupt-class::after, .text-part .risk-class::after { height: 2rem; width: 2rem; top: -webkit-calc(50% - 1.25rem); top: -moz-calc(50% - 1.25rem); top: calc(50% - 1.25rem); } .text-part > .main-class::before, .text-part .disrupt-class::before, .text-part .risk-class::before { height: 2.5rem; width: 2.5rem; font-size: 1rem; top: -webkit-calc(50% - 1.25rem); top: -moz-calc(50% - 1.25rem); top: calc(50% - 1.25rem); right: 1.5rem; } .anom-bar-container.esoteric .text-part > .main-class::before { top: 0.15rem; width: 4.5rem; height: 2.5rem; right: 1rem; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background-position: left -10px center; } .anom-bar-container.esoteric .text-part > .main-class::after { height: 2.5rem; width: 2.5rem; } .bottom-box > .diamond-part { position: absolute; top: 0; right: 0; width: 40vw; height: 40vw; padding: 0; } .diamond-part * { background-repeat: no-repeat; } .top-box .top-left-box { -ms-grid-row: 2; -ms-grid-column: 1; } .top-box .top-center-box { -ms-grid-row: 3; -ms-grid-column: 1; } .top-box .top-right-box { -ms-grid-row: 4; -ms-grid-column: 1; } .anom-bar-container.pending .anom-bar > .bottom-box, .anom-bar-container.neutralized .anom-bar > .bottom-box, .anom-bar-container.neutralised .anom-bar > .bottom-box, .anom-bar-container.explained .anom-bar > .bottom-box { height: 6rem; } .danger-diamond > .top-icon { top: 0.375rem; } .danger-diamond > .right-icon { right: 0.375rem; } .danger-diamond > .left-icon { left: 0.375rem; } .danger-diamond > .bottom-icon { bottom: 0.375rem; } } @supports not (--css: variables) { .anom-bar { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column nowrap; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .anom-bar > .top-box { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .top-box .top-center-box { -webkit-box-flex: 2; -webkit-flex-grow: 2; -moz-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; } .anom-bar > .bottom-box { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .bottom-box > .text-part { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 100%; } .anom-bar-container .text-part .main-class { overflow: hidden; } .anom-bar-container .text-part .disrupt-class, .anom-bar-container .text-part .risk-class { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .anom-bar-container .text-part .disrupt-class .class-category, .anom-bar-container .text-part .risk-class .class-category { -webkit-flex-shrink: 4; -ms-flex-negative: 4; flex-shrink: 4; } .bottom-box > .diamond-part { width: 6rem; height: 6rem; -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } @media (max-width: 480px ) { .anom-bar > .top-box { height: 6rem; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: -webkit-calc(100% - 40vw); width: -moz-calc(100% - 40vw); width: calc(100% - 40vw); } .top-box .top-left-box { display: initial; } .top-box > * { width: 100%; height: auto; } .top-box .top-center-box { -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } } }
.ru.item::before{ content:"ОБЪЕКТ №:" } .ru.level::before{ content:"ДОПУСК" } .contain-class .class-category.ru::before{ content:"КЛАСС СОДЕРЖАНИЯ:" } .disrupt-class .ru.class-category::before{ content:"КЛАСС НАРУШЕНИЯ:" } .risk-class .ru.class-category::before{ content:"КЛАСС РИСКА:" } .second-class .ru.class-category::before{ content:"ВТОРИЧНЫЙ КЛАСС:" } .class-text.notice.ru::before{ content: "предупреждение" } .class-text.caution.ru::before{ content: "остережение" } .class-text.warning.ru::before{ content: "внимание" } .class-text.danger.ru::before{ content: "угроза" } .class-text.critical.ru::before{ content: "критический" } .ru.class-text.dark::before{ content: "тёмный" } .ru.class-text.vlam::before{ content: "влам" } .ru.class-text.keneq::before{ content: "кэнеку" } .ru.class-text.ekhi::before{ content: "экхи" } .ru.class-text.amida::before{ content: "амида" } .class-text.safe.ru::before{ content: "безопасный" } .class-text.euclid.ru::before{ content: "евклид" } .class-text.keter.ru::before{ content: "кетер" } .class-text.explained.ru::before{ content: "обоснованный" } .class-text.neutralized.ru::before{ content: "нейтрализованный" } .class-text.pending.ru::before{ content: "рассматривается" } .class-text.esoteric.ru::before{ content: "внесистемный" } .ru.anom-bar-container.clear-6 .top-right-box > .clearance::before { content: "Совершенно секретно"; } .ru.anom-bar-container.clear-5 .top-right-box > .clearance::before { content: "Строго секретно"; } .ru.anom-bar-container.clear-4 .top-right-box > .clearance::before { content: "Секретно"; } .ru.anom-bar-container.clear-3 .top-right-box > .clearance::before { content: "Служебный"; } .ru.anom-bar-container.clear-2 .top-right-box > .clearance::before { content: "Ограничен"; } .ru.anom-bar-container.clear-1 .top-right-box > .clearance::before { content: "Общий"; }
.top-left-box > .en.item::before {
content:"item#:"
}
.anom-bar-container .en.level::before{
content:"level";
}
.contain-class .en.class-category::before{
content:"containment class"
}
.disrupt-class .en.class-category::before{
content:"disruption class:"
}
.risk-class .en.class-category::before{
content:"risk class:"
}
.second-class .en.class-category::before{
content:"secondary class"
}
.en.class-text.notice::before{
content: "notice"
}
.en.class-text.caution::before{
content: "caution"
}
.en.class-text.warning::before{
content: "warning"
}
.en.class-text.danger::before{
content: "danger"
}
.en.class-text.critical::before{
content: "critical"
}
.en.class-text.dark::before{
content: "dark"
}
.en.class-text.vlam::before{
content: "vlam"
}
.en.class-text.keneq::before{
content: "keneq"
}
.en.class-text.ekhi::before{
content: "ekhi"
}
.en.class-text.amida::before{
content: "amida"
}
.en.class-text.safe::before{
content: "safe"
}
.en.class-text.euclid::before{
content: "euclid"
}
.en.class-text.keter::before{
content: "keter"
}
.en.class-text.explained::before{
content: "explained"
}
.en.class-text.neutralized::before{
content: "neutralized"
}
.en.class-text.pending::before{
content: "pending"
}
.en.class-text.esoteric::before{
content: "esoteric"
}
.anom-bar-container.clear-6 .top-right-box > .en.clearance::before {
content: "Cosmic Top-Secret";
}
.anom-bar-container.clear-5 .top-right-box > .en.clearance::before {
content: "Top-Secret";
}
.anom-bar-container.clear-4 .top-right-box > .en.clearance::before {
content: "Secret";
}
.anom-bar-container.clear-3 .top-right-box > .en.clearance::before {
content: "Confidential";
}
.anom-bar-container.clear-2 .top-right-box > .en.clearance::before {
content: "Restricted";
}
.anom-bar-container.clear-1 .top-right-box > .en.clearance::before {
content: "Unrestricted";
}