t
This commit is contained in:
luki39
parent
17cf966b03
commit
71c56212e7
@ -235,43 +235,6 @@ body, button {
|
||||
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 {
|
||||
border-radius: 50%;
|
||||
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. */
|
||||
#loginDisclaimer {
|
||||
display: flex;
|
||||
@ -860,19 +799,6 @@ body, button {
|
||||
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) *
|
||||
@ -2524,325 +2450,6 @@ input:checked + .toggleSwitchSlider:before {
|
||||
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) *
|
||||
@ -2853,16 +2460,6 @@ input:checked + .toggleSwitchSlider:before {
|
||||
* 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. */
|
||||
#image_seal_container {
|
||||
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
|
||||
* between articles. If you are on the landing page, the up arrow will
|
||||
|
||||
Loading…
Reference in New Issue
Block a user