@import "fluidable";
//-- Basic Color Scheme
@color-white: #f3f3f2;
@color-black: #180614;
@color-link: #1e50a2;
@color-red: #a22041;
@color-pink: #fe019a;
@color-violet: #9d5b8b;
@color-blue: #5654a2;
@color-green: #3b7960;
@color-lightgreen: #938b4b;
@color-orange: #f8b500;
//
//--Main Font
@main-font: museo, serif;
@main-font-weight: 300;
@main-font-weight-strong: 500;
@main-font-weight-thin: 100;

//--Logo Font
@font-face {
    font-family: "Powerpuff";
    src: url("./powerpuff.otf") format("opentype");
}
@font-face {
    font-family: "Katakana";
    src: url("./electroharmonix.ttf") format("truetype");
}

//--
//-- Frot for VLDB Logo
@logo-font: "Powerpuff";
@logo-sub-font: "Katakana";
@logo-font-weight: normal;
@logo-smallfont-weight: 100;
@logo-font-size: 190px;
@logo-font-color: @color-white;
@logo-smallfont-size: 18px;
//--
//-- Menu Bar
@menu-bgcolor: @color-white;
@submenu-bgcolor: #393f4c;
@menu-shadowcolor: rgba(0, 0, 0, 0.4);
@menu-lineheight: 8px;
@color-conference: @color-red;
@color-contributions: @color-violet;
@color-contributions-dark: darken(@color-contributions, 30%);
@color-sponsorship: @color-blue;
@color-sponsorship-dark: darken(@color-sponsorship, 30%);
@color-information: @color-green;
@color-information-dark: darken(@color-information, 30%);
@color-forauthors: @color-lightgreen;
@color-forauthors-dark: darken(@color-forauthors, 30%);
@color-forparticipants: @color-orange;
@color-forparticipants-dark: darken(@color-forparticipants, 30%);
//--
//-- Top Page Settings
@topmask-opacity: 0.6;
@topmask-color: #203744;
@topcontents-bgcolor: @color-red;
@topcontents-accolor: @color-green;
@topscrollbtn-width: 50px;
@topscrollbtn-height: @topscrollbtn-width * 1.2;
@topscrollbtn-amination: cubic-bezier(0.3, 2.4, 0.85, 2.5);
@topscrollbtn-color: @color-white;
//--
//-- Z Indeies
@z-menu: 100;
@z-submenu: 90;
@z-submask: 80;
@z-btnprg: 70;
@z-bg: -100;
@z-bgmask: -99;
@z-social-icon: 10;
@z-contents: 0;
//--
//-- Color Palette
@colors: red, pink, violet, blue, green, lightgreen, orange;
@colors-color: @color-red, @color-pink, @color-violet, @color-blue, @color-green,
    @color-lightgreen, @color-orange;
//--
//-- Categories
@categories: conference, contributions, sponsorship, information, forauthors,
    forparticipants;
@categories-color: @color-conference, @color-contributions, @color-sponsorship,
    @color-information, @color-forauthors, @color-forparticipants;
// --
// -- FONT
@font-bungee: {
    font-family: bungee, sans-serif;
    font-weight: 400; //500
    font-style: normal;
};
.font-museo(@weight:100,@style:normal) {
    font-family: museo, serif;
    font-weight: @weight; //300,500,700,900
    font-style: @style; //italic
}
.font-univia(@weight:400,@style:normal) {
    font-family: univia-pro, sans-serif;
    font-weight: @weight; //200,400,700,900
    font-style: @style;
}
.font-industry(@weight:400,@style:normal) {
    font-family: industry, sans-serif;
    font-weight: @weight; //700
    font-style: @style; //italic
}
.font-adso(@weight:500,@style:normal) {
    font-family: adso, sans-serif;
    font-weight: @weight;
    font-style: @style;
}

html,
div,
body,
article {
    margin: 0;
}

html {
    font-size: 100%;
    height: 100%;
    overflow: hidden;
}
a {
    color: @color-link;
}
body {
    font-family: @main-font;
    font-weight: @main-font-weight;
    font-style: normal;
}

input,
button {
    .font-museo();
}

article {
    font-size: 0.9em;
    line-height: 1.6em;
    text-justify: inter-ideograph;
    text-align: justify;
}

.bgcol-conference {
    background-color: @color-conference;
}

.bgcol-contributions {
    background-color: @color-contributions;
}

.bgcol-sponsorship {
    background-color: @color-sponsorship;
}

.bgcol-information {
    background-color: @color-information;
}

.bgcol-forauthors {
    background-color: @color-forauthors;
}

.bgcol-forparticipants {
    background: @color-forparticipants;
}

.bgcol-contributions-dark {
    background: @color-contributions-dark;
}

.bgcol-sponsorship-dark {
    background-color: @color-sponsorship-dark;
}

.bgcol-information-dark {
    background-color: @color-information-dark;
}

.bgcol-forauthors-dark {
    background-color: @color-forauthors-dark;
}

.bgcol-forparticipants-dark {
    background: @color-forparticipants-dark;
}

.logo-font {
    font-family: @logo-font;
    font-weight: @logo-font-weight;
    font-style: normal;
}

strong {
    font-weight: @main-font-weight-strong;
}

ul.venue {
    list-style: none;
}

svg.toppage-wrap {
    position: absolute;
    width: 100vw;
    height: 100vh;
    text-anchor: middle;
    font-family: @logo-font;
    font-weight: @logo-font-weight;
    font-style: normal;
    font-size: @logo-font-size;
    z-index: @z-bgmask;
}

svg.toppage-wrap .textoutline {
    stroke: @logo-font-color;
    stroke-width: 4px;
    stroke-linejoin: round;
    fill: none;
}

svg.toppage-wrap .smalltext {
    font-family: @logo-sub-font;
    font-size: @logo-smallfont-size;
    letter-spacing: 0px;
    _font-weight: @logo-smallfont-weight;
    stroke: none;
    fill: @logo-font-color;
}

svg.toppage-wrap #textVLDB {
    letter-spacing: 10px;
}

svg.toppage-wrap #text2020 {
    letter-spacing: 9px;
}

svg.toppage-wrap #textTokyo {
    letter-spacing: 0px;
}

svg.toppage-wrap mask rect {
    fill: rgba(255, 255, 255, @topmask-opacity);
}

svg.toppage-wrap > rect {
    fill: @topmask-color;
    -webkit-mask: url(#mask);
    mask: url(#mask);
}

#toppage-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(calc((100% - 100vw) / 2));
    z-index: @z-bg;
}

#toppage-cnt {
    position: absolute;
    left: 0px;
    top: calc(100vh - @topscrollbtn-height);
    width: 100vw;
    z-index: @z-contents;
}

#toppage-toggle:checked ~ #toppage-cnt {
    transform: translateY(calc(-100vh + @topscrollbtn-height));
    transition: transform 0.8s cubic-bezier(0.34, -0.29, 0.38, 0.8);
}

#toppage-toggle ~ #toppage-cnt {
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.55, 0.02, 0.69, 1.15);
}

@menu-bar: {
    position: fixed;
    background-color: @menu-bgcolor;
    box-shadow: 3px 3px 3px @menu-shadowcolor;
    height: @topscrollbtn-height;
    width: calc(50vw - @topscrollbtn-width / 2);
    text-align: center;
    color: @submenu-bgcolor;
    font-size: 0.9rem;
    line-height: @topscrollbtn-height - @menu-lineheight;
    z-index: @z-menu;
    user-select: none;
};

#left-menu-bar {
    @menu-bar();
    right: 100vw;
}

#right-menu-bar {
    @menu-bar();
    left: 100vw;
}

@submenu-panel: {
    position: fixed;
    //bottom: 100vh;
    bottom:100%;
    width: calc(50vw + @topscrollbtn-width / 2);
    text-align: center;
    .font-univia();
    color: @color-white;
    font-size: 0.9rem;
    z-index: @z-submenu;
    user-select: none;
    @media screen and (max-width: @screenTablet) {
        width: 100vw;
    }
};

.left-submenu-panel {
    @submenu-panel();
    left: 0px;
}

.right-submenu-panel {
    @submenu-panel();
    right: 0px;
}

.right-submenu-panel  a,
.left-submenu-panel  a {
    color: @color-white;
    text-decoration: none;
}
label.menu-item > a {
    color: @color-black;
    text-decoration: none;
}

.submenu-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: fadeout(@topmask-color, 20%);
    z-index: @z-submask;
    opacity: 0;
    display: none;
    transition: all 1s;
}

.menu-item {
    height: @topscrollbtn-height - @menu-lineheight;
    .font-adso();
    cursor: pointer;
}

.menu-line {
    height: @menu-lineheight;
    opacity: 0;
    transition: all 1s;
    cursor: pointer;
}

.menu-item:hover ~ .menu-line,
.category-active:checked ~ .menu-line {
    height: @menu-lineheight;
    opacity: 1;
}

.submenu-item {
    padding-top: 6px;
    padding-bottom: 6px;
    cursor: pointer;
    opacity: 0.7;
}

.submenu-item:not(.link-disable):hover {
    opacity: 1;
}

@submenu-close: {
    position: relative;
    top: 0px;
    width: @topscrollbtn-width;
    height: @topscrollbtn-height;
    color: @color-white;
    cursor: pointer;
    transform: rotate(180deg);
};

.right-submenu-panel .submenu-close {
    @submenu-close();
    left: 0px;
    @media screen and (max-width: @screenTablet) {
        left: calc(50vw - @topscrollbtn-width / 2);
    }
}

.left-submenu-panel .submenu-close {
    @submenu-close();
    left: calc(50vw - @topscrollbtn-width / 2);
}

#toppage-toggle:checked ~ #left-menu-bar {
    transform: translateX(calc(50vw - @topscrollbtn-width / 2));
    transition: transform 0.8s cubic-bezier(0.34, -0.29, 0.38, 0.8);
}

#toppage-toggle ~ #left-menu-bar {
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.55, 0.02, 0.69, 1.15);
}

#toppage-toggle:checked ~ #right-menu-bar {
    transform: translateX(calc(-1 * (50vw - @topscrollbtn-width / 2)));
    transition: transform 0.8s cubic-bezier(0.34, -0.29, 0.38, 0.8);
}

#toppage-toggle ~ #right-menu-bar {
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.55, 0.02, 0.69, 1.15);
}

.scroll-cnt {
    position: relative;
    top: 0px;
    left: 50%;
    width: @topscrollbtn-width;
    height: @topscrollbtn-height;
    margin-left: -@topscrollbtn-width / 2;
    color: @color-white;
    cursor: pointer;
}

svg.scroll-btn > polyline {
    fill: none;
    stroke: @topscrollbtn-color;
    stroke-width: 60px;
    stroke-linejoin: round;
    stroke-linecap: round;
}

svg.scroll-btn > circle {
    fill: @topscrollbtn-color;
    stroke: none;
}

svg.scroll-btn #dot1 {
    animation: bounce 1.3s @topscrollbtn-amination infinite;
    animation-delay: 0s;
}

svg.scroll-btn #dot2 {
    animation: bounce 1.3s @topscrollbtn-amination infinite;
    animation-delay: 0.1s;
}

svg.scroll-btn #dot3 {
    animation: bounce 1.3s @topscrollbtn-amination infinite;
    animation-delay: 0.2s;
}

@keyframes bounce {
    from,
    to {
        transform: translateY(0px) scaleY(0.98);
    }
    80% {
        transform: translateY(-100px) scaleY(1.02);
    }
}

.link-disable {
    cursor: not-allowed;
    opacity: 0.3;
}

// ALERT BAR
.alert-bar {
    background-color: #190eb1c7;
    color:@color-white;
    padding: 10px;
}
.alert-bar .stripe {
    background-image: linear-gradient(
        45deg,
        #1d0dfc 25%,
        #dfef12 25%,
        #dfef12 50%,
        #1d0dfc 50%,
        #1d0dfc 75%,
        #dfef12 75%,
        #dfef12 100%
    );
    background-size: 56.57px 56.57px;
}

.alert-bar .body {
    margin: 1rem;
    text-align: justify;
    text-justify: inter-word;
}

// ALERT BAR
.warning-bar {
    background-color: lighten(#f10c45, 25%);
    padding: 2px;
    font-size: 0.75em;
}
.warning-bar .stripe {
    background-image: linear-gradient(
        45deg,
        #f10c45 25%,
        #4a0100 25%,
        #4a0100 50%,
        #f10c45 50%,
        #f10c45 75%,
        #4a0100 75%,
        #4a0100 100%
    );
    background-size: 56.57px 56.57px;
}

.warning-bar .body {
    margin: 0.7rem;
    text-align: justify;
    text-justify: inter-word;
}

.program_btn {
    position: absolute;
    top: 100%;
    left: 0px;
    height: 40px;
    width: 180px;
    margin-top: -70px;
    text-align: center;
    z-index: @z-btnprg;
    background-color: @color-forparticipants;
    box-shadow: 3px 3px 3px @menu-shadowcolor;
    transition: all 0.5s;
}
.program_btn:hover {
    background-color: @color-forparticipants-dark;
}

.prgram_btn div,
.program_btn a {
    padding: 10px;
    line-height: 40px;
    font-size: 1em;
    color: @color-white;
    .font-industry();
    text-decoration: none;
}

@bg-colors: #e9531a, #f5b616, #2696d4, #78b32b;

.programTimeTable {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    .block1 {
        background-color: extract(@bg-colors, 1);
        color: @color-white;
        font-size: 1.5em;
    }
    .block2 {
        background-color: extract(@bg-colors, 2);
        color: @color-white;
        font-size: 1.5em;
    }
    .block3 {
        background-color: extract(@bg-colors, 3);
        color: @color-white;
        font-size: 1.5em;
    }
    .block4 {
        background-color: extract(@bg-colors, 4);
        color: @color-white;
        font-size: 1.5em;
    }
    .utcTZ {
        border-bottom: @color-orange 2px dotted;
    }
    .utcGap {
        border-bottom: @color-orange 2px dotted;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        span {
            display: block;
            justify-content: flex-start;
        }
    }
    .myTZ {
        background: lighten(@color-orange, 20%);
        & + .tucGap {
            background: lighten(@color-orange, 10%);
        }
    }
}
@import "vldb2020-contents";