t
This commit is contained in:
luki39
parent
17cf966b03
commit
71c56212e7
@ -235,43 +235,6 @@ body, button {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
.cloudDiv {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cloudTop {
|
|
||||||
height: 50%;
|
|
||||||
width: 100%;
|
|
||||||
background-image: url('../images/cloudTrans.png');
|
|
||||||
animation: clouds1 80s linear infinite;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cloudBottom {
|
|
||||||
height: 50%;
|
|
||||||
width: 100%;
|
|
||||||
background-image: url('../images/cloudTrans2.png');
|
|
||||||
animation: clouds2 70s linear infinite;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes clouds1 {
|
|
||||||
to {
|
|
||||||
background-position: 200%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes clouds2 {
|
|
||||||
to {
|
|
||||||
background-position: 230%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
#welcomeImageSeal {
|
#welcomeImageSeal {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #cad7e1;
|
border: 2px solid #cad7e1;
|
||||||
@ -747,30 +710,6 @@ body, button {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*.spinningCircle {
|
|
||||||
margin-left: 20px;
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid rgba(255,255,255,0);
|
|
||||||
border-top-color: #ffffff;
|
|
||||||
border-right-color: #ffffff;
|
|
||||||
border-left-color: rgba(255, 255, 255, 0.50);
|
|
||||||
border-bottom-color: rgba(255, 255, 255, 0.50);
|
|
||||||
animation: single2 4s infinite linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes single2 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(720deg);
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
|
|
||||||
/* Disclaimer container. */
|
/* Disclaimer container. */
|
||||||
#loginDisclaimer {
|
#loginDisclaimer {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -860,19 +799,6 @@ body, button {
|
|||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
#login_filter {
|
|
||||||
height: calc(100% - 22px);
|
|
||||||
width: 100%;
|
|
||||||
z-index: 9000;
|
|
||||||
position: absolute;
|
|
||||||
filter: blur(8px) contrast(0.9) brightness(1.0);
|
|
||||||
background: url('./../images/backgrounds/0.jpg') no-repeat center center fixed;
|
|
||||||
transform: scale(1.2);
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*******************************************************************************
|
/*******************************************************************************
|
||||||
* *
|
* *
|
||||||
* Waiting View (waiting.ejs) *
|
* Waiting View (waiting.ejs) *
|
||||||
@ -2524,325 +2450,6 @@ input:checked + .toggleSwitchSlider:before {
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*******************************************************************************
|
|
||||||
* *
|
|
||||||
* Landing View (News Styles) *
|
|
||||||
* *
|
|
||||||
******************************************************************************/
|
|
||||||
|
|
||||||
/* Main container. */
|
|
||||||
#newsContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
transition: top 2s ease;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* News content container. */
|
|
||||||
#newsContent {
|
|
||||||
height: 82vh;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
-webkit-user-select: initial;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Drop shadow displayed when content is scrolled out of view. */
|
|
||||||
#newsContent:before {
|
|
||||||
content: '';
|
|
||||||
background: linear-gradient(rgba(0, 0, 0, 0.25), transparent);
|
|
||||||
width: 100%;
|
|
||||||
height: 5px;
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.25s ease;
|
|
||||||
}
|
|
||||||
#newsContent[scrolled]:before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* News article status container (left). */
|
|
||||||
#newsStatusContainer {
|
|
||||||
width: calc(30% - 60px);
|
|
||||||
height: calc(100% - 30px);
|
|
||||||
padding: 15px 15px 15px 45px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* News status content. */
|
|
||||||
#newsStatusContent {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* News title wrapper. */
|
|
||||||
#newsTitleContainer {
|
|
||||||
display: flex;
|
|
||||||
max-width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* News article title styles. */
|
|
||||||
#newsArticleTitle {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: 'Avenir Medium';
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: 0.25s ease;
|
|
||||||
outline: none;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
#newsArticleTitle:hover,
|
|
||||||
#newsArticleTitle:focus {
|
|
||||||
text-shadow: 0px 0px 20px white;
|
|
||||||
}
|
|
||||||
#newsArticleTitle:active {
|
|
||||||
color: #c7c7c7;
|
|
||||||
text-shadow: 0px 0px 20px #c7c7c7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* News meta container. */
|
|
||||||
#newsMetaContainer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Date and author wrappers. */
|
|
||||||
#newsArticleDateWrapper,
|
|
||||||
#newsArticleAuthorWrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Date and author shared styles. */
|
|
||||||
#newsArticleDate,
|
|
||||||
#newsArticleAuthor {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 10px;
|
|
||||||
padding: 0px 5px;
|
|
||||||
font-weight: bold;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Date styles. */
|
|
||||||
#newsArticleDate {
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Author styles. */
|
|
||||||
#newsArticleAuthor {
|
|
||||||
background: #a02d2a;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* News article comments styles. */
|
|
||||||
#newsArticleComments {
|
|
||||||
margin-top: 5px;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: 0.25s ease;
|
|
||||||
outline: none;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
#newsArticleComments:focus,
|
|
||||||
#newsArticleComments:hover {
|
|
||||||
color: #e0e0e0;
|
|
||||||
}
|
|
||||||
#newsArticleComments:active {
|
|
||||||
color: #c7c7c7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Article content container (right). */
|
|
||||||
#newsArticleContainer {
|
|
||||||
width: calc(100% - 25px);
|
|
||||||
height: 100%;
|
|
||||||
margin: 0px 0px 0px 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Article content styles. */
|
|
||||||
#newsArticleContentScrollable {
|
|
||||||
font-size: 12px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0px 15px 0px 15px;
|
|
||||||
}
|
|
||||||
#newsArticleContentScrollable img,
|
|
||||||
#newsArticleContentScrollable iframe {
|
|
||||||
max-width: 95%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
#newsArticleContentScrollable a {
|
|
||||||
color: rgba(202, 202, 202, 0.75);
|
|
||||||
transition: 0.25s ease;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
#newsArticleContentScrollable a:hover,
|
|
||||||
#newsArticleContentScrollable a:focus {
|
|
||||||
color: rgba(255, 255, 255, 0.75);
|
|
||||||
}
|
|
||||||
#newsArticleContentScrollable a:active {
|
|
||||||
color: rgba(165, 165, 165, 0.75);
|
|
||||||
}
|
|
||||||
#newsArticleContentScrollable::-webkit-scrollbar {
|
|
||||||
width: 2px;
|
|
||||||
}
|
|
||||||
#newsArticleContentScrollable::-webkit-scrollbar-track {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#newsArticleContentScrollable::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
|
|
||||||
}
|
|
||||||
.bbCodeSpoilerButton {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
transition: 0.25s ease;
|
|
||||||
width: 100%;
|
|
||||||
border-bottom: 1px solid white;
|
|
||||||
padding-bottom: 15px;
|
|
||||||
}
|
|
||||||
.bbCodeSpoilerButton:hover,
|
|
||||||
.bbCodeSpoilerButton:focus {
|
|
||||||
text-shadow: 0px 0px 20px #ffffff, 0px 0px 20px #ffffff, 0px 0px 20px #ffffff;
|
|
||||||
}
|
|
||||||
.bbCodeSpoilerButton:active {
|
|
||||||
color: #c7c7c7;
|
|
||||||
text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
|
|
||||||
}
|
|
||||||
.bbCodeSpoilerText {
|
|
||||||
display: none;
|
|
||||||
padding: 15px 0px;
|
|
||||||
border-bottom: 1px solid white;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#newsArticleContentWrapper {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsArticleSpacerTop {
|
|
||||||
height: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Div to add spacing at the end of a news article. */
|
|
||||||
.newsArticleSpacerBot {
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* News navigation container. */
|
|
||||||
#newsNavigationContainer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 15px;
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigation status span. */
|
|
||||||
#newsNavigationStatus {
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 0px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Left and right navigation button styles. */
|
|
||||||
#newsNavigateLeft,
|
|
||||||
#newsNavigateRight {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
height: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
#newsNavigateLeft:hover #newsNavigationLeftSVG,
|
|
||||||
#newsNavigateLeft:focus #newsNavigationLeftSVG,
|
|
||||||
#newsNavigateRight:hover #newsNavigationRightSVG,
|
|
||||||
#newsNavigateRight:focus #newsNavigationRightSVG {
|
|
||||||
-webkit-filter: drop-shadow(0px 0px 2px #fff);
|
|
||||||
}
|
|
||||||
#newsNavigateLeft:active #newsNavigationLeftSVG .arrowLine,
|
|
||||||
#newsNavigateRight:active #newsNavigationRightSVG .arrowLine {
|
|
||||||
stroke: #c7c7c7;
|
|
||||||
}
|
|
||||||
#newsNavigateLeft:active #newsNavigationLeftSVG,
|
|
||||||
#newsNavigateRight:active #newsNavigationRightSVG {
|
|
||||||
-webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
|
|
||||||
}
|
|
||||||
#newsNavigateLeft:disabled #newsNavigationLeftSVG .arrowLine,
|
|
||||||
#newsNavigateRight:disabled #newsNavigationRightSVG .arrowLine {
|
|
||||||
stroke: rgba(255, 255, 255, 0.75);
|
|
||||||
}
|
|
||||||
#newsNavigationLeftSVG {
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
width: 15px;
|
|
||||||
}
|
|
||||||
#newsNavigationRightSVG {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
width: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* News error (message) container. */
|
|
||||||
#newsErrorContainer {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
#newsErrorFailed {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* News error content (message). */
|
|
||||||
.newsErrorContent {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
#newsErrorLoading {
|
|
||||||
display: flex;
|
|
||||||
width: 168.92px;
|
|
||||||
}
|
|
||||||
#nELoadSpan {
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
/* News error retry button styles. */
|
|
||||||
#newsErrorRetry {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
transition: 0.25s ease;
|
|
||||||
}
|
|
||||||
#newsErrorRetry:focus,
|
|
||||||
#newsErrorRetry:hover {
|
|
||||||
text-shadow: 0px 0px 20px white;
|
|
||||||
}
|
|
||||||
#newsErrorRetry:active {
|
|
||||||
color: #c7c7c7;
|
|
||||||
text-shadow: 0px 0px 20px #c7c7c7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************************************************************
|
/*******************************************************************************
|
||||||
* *
|
* *
|
||||||
* Landing View (Top Styles) *
|
* Landing View (Top Styles) *
|
||||||
@ -2853,16 +2460,6 @@ input:checked + .toggleSwitchSlider:before {
|
|||||||
* Landing View (Top Styles) | Left Content
|
* Landing View (Top Styles) | Left Content
|
||||||
* * */
|
* * */
|
||||||
|
|
||||||
/* Logo image. */
|
|
||||||
#image_seal {
|
|
||||||
height: 70px;
|
|
||||||
width: auto;
|
|
||||||
position: relative;
|
|
||||||
border: 2px solid white;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Logo container styles. */
|
/* Logo container styles. */
|
||||||
#image_seal_container {
|
#image_seal_container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@ -681,73 +681,6 @@ function dlAsync(login = true){
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* News Loading Functions
|
|
||||||
*/
|
|
||||||
|
|
||||||
// DOM Cache
|
|
||||||
const newsContent = document.getElementById('newsContent')
|
|
||||||
const newsArticleTitle = document.getElementById('newsArticleTitle')
|
|
||||||
const newsArticleDate = document.getElementById('newsArticleDate')
|
|
||||||
const newsArticleAuthor = document.getElementById('newsArticleAuthor')
|
|
||||||
const newsArticleComments = document.getElementById('newsArticleComments')
|
|
||||||
const newsNavigationStatus = document.getElementById('newsNavigationStatus')
|
|
||||||
const newsArticleContentScrollable = document.getElementById('newsArticleContentScrollable')
|
|
||||||
const nELoadSpan = document.getElementById('nELoadSpan')
|
|
||||||
|
|
||||||
// News slide caches.
|
|
||||||
let newsActive = false
|
|
||||||
let newsGlideCount = 0
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Show the news UI via a slide animation.
|
|
||||||
*
|
|
||||||
* @param {boolean} up True to slide up, otherwise false.
|
|
||||||
*/
|
|
||||||
function slide_(up){
|
|
||||||
const lCUpper = document.querySelector('#landingContainer > #upper')
|
|
||||||
const lCLLeft = document.querySelector('#landingContainer > #lower > #left')
|
|
||||||
const lCLCenter = document.querySelector('#landingContainer > #lower > #center')
|
|
||||||
const lCLRight = document.querySelector('#landingContainer > #lower > #right')
|
|
||||||
const newsBtn = document.querySelector('#landingContainer > #lower > #center #content')
|
|
||||||
const landingContainer = document.getElementById('landingContainer')
|
|
||||||
const newsContainer = document.querySelector('#landingContainer > #newsContainer')
|
|
||||||
|
|
||||||
newsGlideCount++
|
|
||||||
|
|
||||||
if(up){
|
|
||||||
lCUpper.style.top = '-200vh'
|
|
||||||
lCLLeft.style.top = '-200vh'
|
|
||||||
lCLCenter.style.top = '-200vh'
|
|
||||||
lCLRight.style.top = '-200vh'
|
|
||||||
newsBtn.style.top = '130vh'
|
|
||||||
newsContainer.style.top = '0px'
|
|
||||||
//date.toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric'})
|
|
||||||
//landingContainer.style.background = 'rgba(29, 29, 29, 0.55)'
|
|
||||||
landingContainer.style.background = 'rgba(0, 0, 0, 0.50)'
|
|
||||||
setTimeout(() => {
|
|
||||||
if(newsGlideCount === 1){
|
|
||||||
lCLCenter.style.transition = 'none'
|
|
||||||
newsBtn.style.transition = 'none'
|
|
||||||
}
|
|
||||||
newsGlideCount--
|
|
||||||
}, 2000)
|
|
||||||
} else {
|
|
||||||
setTimeout(() => {
|
|
||||||
newsGlideCount--
|
|
||||||
}, 2000)
|
|
||||||
landingContainer.style.background = null
|
|
||||||
lCLCenter.style.transition = null
|
|
||||||
newsBtn.style.transition = null
|
|
||||||
newsContainer.style.top = '100%'
|
|
||||||
lCUpper.style.top = '0px'
|
|
||||||
lCLLeft.style.top = '0px'
|
|
||||||
lCLCenter.style.top = '0px'
|
|
||||||
lCLRight.style.top = '0px'
|
|
||||||
newsBtn.style.top = '10px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add keyboard controls to the news UI. Left and right arrows toggle
|
* Add keyboard controls to the news UI. Left and right arrows toggle
|
||||||
* between articles. If you are on the landing page, the up arrow will
|
* between articles. If you are on the landing page, the up arrow will
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user