"""This code defines the Cascading Style Sheets (CSS) for the CPF MCS GUI.

AUTHOR        :  Brian Ha (summer intern)
MENTOR        :  Gene Massion
MBARI TEAM    :  Chemical Sensor Group
PROJECT       :  Coastal Profiling Floats (CPF)
DATE CREATED  :  2018-06-29
LAST REVISION :  2018-07-31
"""

# CPF MCS-Specific Imports
# =============================================================================
from gui.app import app

# Constants
# =============================================================================
from cpf_constants import HOME_PAGE_BACKGROUND


# CSS Dictionaries
# =============================================================================

# Navigation Bar Styling
nav_bar_div_style = {
    'width': '100vw',
    'backgroundColor': '#004557',
}

nav_bar_text_style = {
    'text-decoration': 'none',
    'color': 'white',
    'paddingLeft': 20,
    'paddingRight': 20,
    'fontFamily': 'Optima, sans-serif',
    'fontWeight': 'bold',
    'fontSize': 16,
    'marginRight': 2.5,
    'marginLeft': 2.5,
}

nav_bar_li_style ={
    'display': 'inline-block',
    'marginBottom': 0,
}

mbari_logo_style = {
    'paddingRight': '4%',
    'height': 40,
    'paddingTop': '0.5%'
}


# Home Page Styling
home_div_style = {
    'backgroundImage': 'url("%s")' % HOME_PAGE_BACKGROUND,
    'backgroundPosition': 'center',
    'backgroundSize': 'cover',
    'backgroundRepeat': 'no-repeat',
    'height': '100vh',
}

home_title_style = {
    'fontSize': 60,
    'textAlign': 'center',
    'color': 'white',
    'position': 'absolute',
    'top': '50%',
    'left': '50%',
    'transform': 'translate(-50%, -50%)',
    'fontFamily': 'Rockwell, Arial',
    'fontWeight': 'bold'
}


# Non-Home Page Styling
content_page_style = {
    'backgroundColor': '#004557',
    'height': '100vh',
}

content_heading_style = {
    'color': 'white',
    'fontSize': 40,
    'fontFamily': 'Helvetica, Arial',
    'textAlign': 'center',
    'fontWeight': 'bold',
    'margin': 0,
}

plot_style = {
    'height': '100%',
    'width': '100%'
}


# Fleet Overview Page Styling
fleet_plot_background_style = {
    'backgroundColor': 'white',
    'display': 'inline-block',
    'padding': '0.5%',
    'borderRadius': 10,
    'width': '48.5%',
    'marginBottom': '4px',
    'height': '38vh',
    'minHeight': '350px',
}


# Float Viewer Page Styling
float_plot_background_style = {
    'backgroundColor': 'white',
    'textAlign': 'center',
    'float': 'left',
    'padding': '0.5%',
    'borderRadius': 10,
    'marginBottom': '10px',
    'minHeight': '300px',
}

html_p_error_msg_style = {
    'color': 'red',
    'fontSize': 16,
    'fontWeight': 'bold'
}


# Command Page Styling
enabled_append_button_style = {
    'color': 'black',
    'backgroundColor': '#aaffaa',
    'width': '75%',
    'marginRight': '2%',
    'marginTop': 23,
    'fontSize': 16,
}

disabled_append_button_style = {
    'color': 'black',
    'backgroundColor': 'grey',
    'width': '75%',
    'marginRight': '2%',
    'fontSize': 16,
}

clear_button_style = {
    'color': 'black',
    'backgroundColor': '#ff6e6e',
    'width': '23%',
    'fontSize': 16,
}

send_button_style = {
    'color': 'black',
    'backgroundColor': '#ffe26a',
    'marginTop': '1%',
    'width': '23%',
    'fontSize': 16,
    'display': 'inline-block',
}

command_value_input_style = {
    'margin': 5,
}

successful_msg_style = {
    'color': 'white',
    'width': '75%',
    'marginRight': '2%',
    'display': 'inline-block',
    'fontSize': 16,
    'fontWeight': 'bold'
}

error_msg_style = {
    'color': 'red',
    'width': '75%',
    'marginRight': '2%',
    'display': 'inline-block',
    'fontSize': 16,
    'fontWeight': 'bold'
}

range_input_error_msg_style = {
    'color': 'red',
    'fontWeight': 'bold'
}


# External CSS
# =============================================================================
app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})