775 lines
24 KiB
CSS
775 lines
24 KiB
CSS
body {
|
|
background-color: steelblue;
|
|
/* https://app.haikei.app/ */
|
|
background-image: url('../static/images/site_background.svg');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
}
|
|
|
|
body>.body_container {
|
|
}
|
|
|
|
/* #System-Nav-Menu { } */
|
|
#Site-Header { }
|
|
#Site-Nav-Menu { }
|
|
#System-Notifications { }
|
|
#Main-Body {
|
|
}
|
|
#Main-Notifications { }
|
|
#Main-Nav-Menu { }
|
|
#Main-Content { }
|
|
#Site-Footer { }
|
|
/* #System-Footer { } */
|
|
/* #System-Nav-Menu-Float { } */
|
|
/* #System-Debug { } */
|
|
|
|
|
|
/* #System-Nav-Menu { outline: dashed thin red; } */
|
|
/* #Site-Header { outline: dashed thin red; } */
|
|
/* #Site-Nav-Menu { outline: dashed thin pink; } */
|
|
/* #System-Notifications { outline: dashed thin red; } */
|
|
/* #Main-Body { outline: dotted thin green; } */
|
|
/* #Main-Notifications { outline: dotted thin blue; } */
|
|
/* #Main-Nav-Menu { outline: dotted thin blue; } */
|
|
/* #Main-Content { outline: dotted thin blue; } */
|
|
/* #Site-Footer { outline: dotted thin blue; } */
|
|
/* #System-Footer { outline: dashed thin red; } */
|
|
/* #System-Debug { outline: dashed thin red; } */
|
|
|
|
|
|
#System-Nav-Menu {
|
|
border: solid thick transparent;
|
|
border-top: none;
|
|
border-left: solid thick hsl(var(--hue-green),var(--saturation-least),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-green),var(--saturation-least),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-green),var(--saturation-least),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-green),var(--saturation-least),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-color: hsla(0,0%,100%,.98);
|
|
}
|
|
|
|
#System-Nav-Menu:hover {
|
|
border-left: solid thick hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
/* background-color: hsla(0,0%,80%,1); */
|
|
background-image: linear-gradient(to right, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest).1) 0%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.9) 3%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.9) 97%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.1) 100%);
|
|
|
|
}
|
|
|
|
#System-Nav-Menu img {
|
|
}
|
|
#System-Nav-Menu:hover img {
|
|
}
|
|
|
|
.system_menu_clicked {
|
|
border-left: solid thick hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image: linear-gradient(to right, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest).1) 0%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.9) 3%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.9) 97%, hsla(var(--hue-yellow), var(--saturation-less), var(--lum-lightest),.1) 100%);
|
|
}
|
|
|
|
|
|
.system_menu_begin {
|
|
/*border: solid thin red;*/
|
|
|
|
text-shadow: 0 0 .25rem hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),1), 0 0 .75rem hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),1), 0 0 1rem hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),1);
|
|
|
|
color: black;
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),.9) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),.9) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),0) 100%);*/
|
|
}
|
|
.system_menu_begin:hover {
|
|
}
|
|
|
|
.system_menu_center {
|
|
/*border: solid thin blue;*/
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-mid),.1) 25%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-mid),.8) 50%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-mid),.9) 75%);*/
|
|
}
|
|
|
|
.system_menu_end {
|
|
/*border: solid thin red;*/
|
|
|
|
text-shadow: 0 0 .25rem white, 0 0 .75rem hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),1), 0 0 1rem hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),1);
|
|
|
|
color: black;
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.6) 20%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.6) 80%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 100%);*/
|
|
}
|
|
.system_menu_end:hover {
|
|
}
|
|
|
|
.system_menu_hidden {
|
|
border-bottom: solid thin gray;
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.9) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.9) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 100%);*/
|
|
}
|
|
.system_menu_hidden:hover {
|
|
}
|
|
|
|
.system_menu_visible {
|
|
/*border-bottom: solid thin gray;*/
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.9) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.9) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 100%);*/
|
|
}
|
|
.system_menu_visible:hover {
|
|
}
|
|
|
|
.system_menu_name {
|
|
/*border: dashed thin blue;*/
|
|
|
|
background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.8) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.8) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 100%);
|
|
}
|
|
|
|
.system_menu_name img {
|
|
}
|
|
|
|
.system_menu_information {
|
|
/*border: dashed thin green;*/
|
|
|
|
background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.8) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.8) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),0) 100%);
|
|
}
|
|
.system_menu_information:hover {
|
|
/*background-color: gray;*/
|
|
|
|
/*background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),.9) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),.9) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lighter),0) 100%);*/
|
|
|
|
background-image: linear-gradient(to right, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.0) 0%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.97) 3%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.97) 97%, hsla(var(--hue-blue), var(--saturation-least), var(--lum-lightest),.0) 100%);
|
|
|
|
}
|
|
|
|
/* Set style based on the user's permissions */
|
|
.system_menu.user_super {
|
|
border-left: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.system_menu.user_manager {
|
|
border-left: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-orange),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.system_menu.user_administrator {
|
|
border-left: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-yellow),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.system_menu.user_verified {
|
|
border-left: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-yellow),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.system_menu.user_authenticated {
|
|
border-left: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-right: solid thick hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-bottom: solid thin hsl(var(--hue-red),var(--saturation-most),var(--lum-darkest));
|
|
border-image:
|
|
linear-gradient(
|
|
to top,
|
|
hsl(var(--hue-green),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
) 1;
|
|
|
|
background-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
hsl(var(--hue-cyan),var(--saturation-most),var(--lum-darkest)),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.system_menu .user_status_options {
|
|
font-size: .8rem;
|
|
line-height: 1rem;
|
|
}
|
|
/* *** END *** System *** System Menu (root menu) *** */
|
|
|
|
|
|
/* *** BEGIN *** System *** System Menu Floating/Fixed (root menu) *** */
|
|
#System-Nav-Menu-Float {
|
|
background-color: rgba(220,175,175,.8);
|
|
}
|
|
/* *** END *** System *** System Menu Floating/Fixed (root menu) *** */
|
|
|
|
|
|
#Site-Header {
|
|
background-color: hsla(0,0%,100%,.98);
|
|
}
|
|
|
|
#Site-Header img {
|
|
}
|
|
|
|
|
|
/* *** BEGIN *** System *** System Site Nav Menu *** */
|
|
#Site-Nav-Menu {
|
|
background-color: hsla(0,0%,100%,.98);
|
|
border-bottom: solid thin hsla(0,0%,80%,1);
|
|
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
#Site-Nav-Menu ul {
|
|
}
|
|
|
|
#Site-Nav-Menu ul>li {
|
|
/* background-color: var(--site_menu_btn_bg_color); */
|
|
/* border: solid thin var(--site_menu_btn_border_color);
|
|
* border-radius: .25rem; */
|
|
/* font-weight: var(--btn_font_weight_default); */
|
|
/* color: var(--site_menu_btn_color); */
|
|
}
|
|
|
|
#Site-Nav-Menu ul>li:hover {
|
|
/* background-color: var(--site_menu_btn_hover_bg_color); */
|
|
/* border: solid thin var(--site_menu_btn_hover_border_color); */
|
|
/* color: var(--site_menu_btn_hover_color); */
|
|
}
|
|
|
|
#Site-Nav-Menu ul>li.nav_disabled {
|
|
/* background-color: var(--site_menu_btn_disabled_bg_color);
|
|
* border: solid thin var(--site_menu_btn_disabled_border_color);
|
|
*
|
|
* font-weight: var(--btn_font_weight_disabled);
|
|
* color: var(--site_menu_btn_disabled_color);
|
|
* text-decoration: line-through; */
|
|
}
|
|
#Site-Nav-Menu ul>li.nav_active {
|
|
/* font-weight: var(--btn_font_weight_active); */
|
|
}
|
|
#Site-Nav-Menu ul>li.nav_primary {
|
|
font-weight: var(--btn_font_weight_primary);
|
|
/* border-right: solid thin hsla(0,0%,50%,.5); */
|
|
}
|
|
|
|
#Site-Nav-Menu .btn {
|
|
border-color: hsla(0,0%,90%,.1);
|
|
background-color: hsla(0,0%,90%,.1);
|
|
}
|
|
/* *** END *** System *** System Site Nav Menu *** */
|
|
|
|
#System-Notifications {
|
|
background-color: hsla(0,0%,100%,.98);
|
|
}
|
|
|
|
|
|
#Main-Body {
|
|
background-color: hsla(0,0%,100%,.98);
|
|
}
|
|
|
|
#Main-Notifications {
|
|
/* background-color: hsla(var(--hue-info),var(--saturation-least),var(--lum-lighter),.1); */
|
|
/* background-color: hsla(0,0%,100%,.98); */
|
|
}
|
|
|
|
|
|
/* *** BEGIN *** Main *** Main Nav Menu *** */
|
|
#Main-Nav-Menu {
|
|
|
|
}
|
|
|
|
#Main-Nav-Menu ul {
|
|
}
|
|
|
|
#Main-Nav-Menu ul>li {
|
|
}
|
|
|
|
#Main-Nav-Menu ul>li:hover {
|
|
}
|
|
|
|
#Main-Nav-Menu ul>li.disabled {
|
|
background-color: var(--site_menu_btn_disabled_bg_color);
|
|
border: solid thin var(--site_menu_btn_disabled_border_color);
|
|
|
|
font-weight: var(--btn_font_weight_disabled);
|
|
color: var(--site_menu_btn_disabled_color);
|
|
text-decoration: line-through;
|
|
}
|
|
#Main-Nav-Menu ul>li.active {
|
|
font-weight: var(--btn_font_weight_active);
|
|
}
|
|
#Main-Nav-Menu ul>li.primary {
|
|
font-weight: var(--btn_font_weight_primary);
|
|
}
|
|
|
|
|
|
|
|
|
|
#Main-Nav-Menu .m_btn {
|
|
appearance: button;
|
|
|
|
cursor: pointer;
|
|
|
|
background-color: var(--site_menu_btn_bg_color);
|
|
|
|
border: solid thin var(--site_menu_btn_border_color);
|
|
border-radius: .25rem;
|
|
|
|
/* line-height: 1rem; */
|
|
/* font-size: 1rem; */
|
|
font-weight: var(--btn_font_weight_default);
|
|
text-align: center;
|
|
|
|
color: var(--site_menu_btn_color);
|
|
|
|
/* NOTE: transition when hover ends */
|
|
transition-property: color, background-color, border-color;
|
|
transition-delay: var(--btn_trans_out_delay); /* short delay */
|
|
transition-duration: var(--btn_trans_out_duration);
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
#Main-Nav-Menu .m_btn:hover {
|
|
/* background-color: var(--site_menu_btn_hover_bg_color); */
|
|
|
|
/* border: solid thin var(--site_menu_btn_hover_border_color); */
|
|
|
|
/* color: var(--site_menu_btn_hover_color); */
|
|
|
|
/* NOTE: transition when hover starts */
|
|
transition-property: color, background-color, border-color;
|
|
transition-delay: var(--btn_trans_in_delay); /* no delay */
|
|
transition-duration: var(--btn_trans_in_duration);
|
|
transition-timing-function: linear;
|
|
}
|
|
/* *** END *** System *** System Main Nav Menu *** */
|
|
|
|
#Main-Content {
|
|
}
|
|
|
|
|
|
/* *** BEGIN *** System *** Site Footer *** */
|
|
/* site_footer or site_footer or site_status is the global (root) footer or status bar */
|
|
#Site-Footer {
|
|
background-color: var(--site_footer_bg_color);
|
|
|
|
border-top: solid thin var(--site_footer_border_color);
|
|
|
|
color: var(--site_footer_color);
|
|
}
|
|
|
|
#Site-Footer:hover {
|
|
background-color: var(--site_footer_hover_bg_color);
|
|
|
|
border-top: solid thin var(--site_footer_hover_border_color);
|
|
|
|
color: var(--site_footer_hover_color);
|
|
}
|
|
|
|
.site_footer .footer_left {
|
|
}
|
|
.site_footer .footer_right {
|
|
}
|
|
/* *** END *** System *** Site Footer *** */
|
|
|
|
|
|
|
|
/* *** BEGIN *** System *** System Footer *** */
|
|
/* system_footer or system_footer or system_status is the global (root) footer or status bar */
|
|
#System-Footer {
|
|
font-size: .8rem;
|
|
|
|
background-color: var(--system_footer_bg_color);
|
|
|
|
border-top: solid thin var(--system_footer_border_color);
|
|
|
|
color: var(--system_footer_color);
|
|
|
|
/* NOTE: transition when hover ends */
|
|
transition-property: color, background-color, border-color;
|
|
transition-delay: var(--btn_trans_out_delay); /* short delay */
|
|
transition-duration: var(--btn_trans_out_duration);
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
#System-Footer:hover {
|
|
background-color: var(--system_footer_hover_bg_color);
|
|
|
|
border-top: solid thin var(--system_footer_hover_border_color);
|
|
|
|
color: var(--system_footer_hover_color);
|
|
|
|
/* NOTE: transition when hover starts */
|
|
transition-property: color, background-color, border-color;
|
|
transition-delay: var(--btn_trans_in_delay); /* no delay */
|
|
transition-duration: var(--btn_trans_in_duration);
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
.system_footer .footer_left {
|
|
}
|
|
.system_footer .footer_right {
|
|
}
|
|
/* *** END *** System *** System Footer *** */
|
|
|
|
|
|
/* *** BEGIN *** System *** Debug *** */
|
|
#hidden_system_debug {
|
|
}
|
|
|
|
#System-Debug {
|
|
/* background-color: rgba(220,175,175,.95); */
|
|
background-color: rgba(220,175,175,1);
|
|
|
|
border: dashed thin pink;
|
|
|
|
font-size: .7rem;
|
|
|
|
opacity: .75;
|
|
transition: opacity .95s linear .5s;
|
|
}
|
|
|
|
#System-Debug:hover {
|
|
border: solid thin pink;
|
|
|
|
opacity: .95;
|
|
|
|
/* background-color: rgba(220,175,175,1); */
|
|
}
|
|
|
|
.view_system_debug {
|
|
cursor: help;
|
|
}
|
|
/* *** END *** System *** Debug *** */
|
|
|
|
|
|
/* *** BEGIN *** System *** Buttons *** */
|
|
a.btn {
|
|
/* font-family: inherit; */
|
|
/* font-size: inherit; */
|
|
/* font-style: inherit; */
|
|
/* font-weight: inherit; */
|
|
/* line-height: inherit; */
|
|
text-decoration: none;
|
|
}
|
|
|
|
button.btn {
|
|
/* font-family: inherit; */
|
|
/* font-size: inherit; */
|
|
/* font-style: inherit; */
|
|
/* font-weight: inherit; */
|
|
/* line-height: inherit; */
|
|
/* text-decoration: none; */
|
|
}
|
|
|
|
.btn {
|
|
appearance: button;
|
|
|
|
display: inline-block;
|
|
|
|
border: solid thin var(--default_btn_border_color);
|
|
border-radius: .25em;
|
|
|
|
margin: .0em;
|
|
padding: .25em .5em;
|
|
|
|
line-height: 1em;
|
|
font-size: 1em;
|
|
text-align: center;
|
|
|
|
cursor: pointer;
|
|
|
|
/*display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;*/
|
|
|
|
/* NOTE: transition when hover ends */
|
|
transition-property: color, background-color, border-color;
|
|
transition-delay: var(--btn_trans_out_delay); /* short delay */
|
|
transition-duration: var(--btn_trans_out_duration);
|
|
transition-timing-function: linear;
|
|
}
|
|
.btn:hover {
|
|
/* NOTE: transition when hover starts */
|
|
transition-property: color, background-color, border-color;
|
|
transition-delay: var(--btn_trans_in_delay); /* no delay */
|
|
transition-duration: var(--btn_trans_in_duration);
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
.btn_default {
|
|
color: var(--default_btn_color);
|
|
background-color: var(--default_btn_bg_color);
|
|
border: solid thin var(--default_btn_border_color);
|
|
}
|
|
.btn_default:hover {
|
|
color: var(--default_btn_hover_color);
|
|
background-color: var(--default_btn_hover_bg_color);
|
|
border: solid thin var(--default_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_outline_default {
|
|
color: var(--default_btn_outline_color);
|
|
background-color: var(--default_btn_outline_bg_color);
|
|
border: solid thin var(--default_btn_outline_border_color);
|
|
}
|
|
.btn_outline_default:hover {
|
|
color: var(--default_btn_hover_color);
|
|
background-color: var(--default_btn_hover_bg_color);
|
|
border: solid thin var(--default_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_primary {
|
|
font-weight: var(--btn_font_weight_primary);
|
|
color: var(--primary_btn_color);
|
|
background-color: var(--primary_btn_bg_color);
|
|
border: solid thin var(--primary_btn_border_color);
|
|
}
|
|
.btn_primary:hover {
|
|
color: var(--primary_btn_hover_color);
|
|
background-color: var(--primary_btn_hover_bg_color);
|
|
border: solid thin var(--primary_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_outline_primary {
|
|
font-weight: var(--btn_font_weight_primary);
|
|
color: var(--primary_btn_outline_color);
|
|
background-color: var(--primary_btn_outline_bg_color);
|
|
border: solid thin var(--primary_btn_outline_border_color);
|
|
}
|
|
.btn_outline_primary:hover {
|
|
color: var(--primary_btn_hover_color);
|
|
background-color: var(--primary_btn_hover_bg_color);
|
|
border: solid thin var(--primary_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_secondary {
|
|
font-weight: var(--btn_font_weight_default);
|
|
color: var(--secondary_btn_color);
|
|
background-color: var(--secondary_btn_bg_color);
|
|
border: solid thin var(--secondary_btn_border_color);
|
|
}
|
|
.btn_secondary:hover {
|
|
color: var(--secondary_btn_hover_color);
|
|
background-color: var(--secondary_btn_hover_bg_color);
|
|
border: solid thin var(--secondary_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_outline_secondary {
|
|
font-weight: var(--btn_font_weight_default);
|
|
color: var(--secondary_btn_outline_color);
|
|
background-color: var(--secondary_btn_outline_bg_color);
|
|
border: solid thin var(--secondary_btn_outline_border_color);
|
|
}
|
|
.btn_outline_secondary:hover {
|
|
color: var(--secondary_btn_hover_color);
|
|
background-color: var(--secondary_btn_hover_bg_color);
|
|
border: solid thin var(--secondary_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_info {
|
|
color: var(--info_btn_color);
|
|
background-color: var(--info_btn_bg_color);
|
|
border: solid thin var(--info_btn_border_color);
|
|
}
|
|
.btn_info:hover {
|
|
color: var(--info_btn_hover_color);
|
|
background-color: var(--info_btn_hover_bg_color);
|
|
border: solid thin var(--info_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_outline_info {
|
|
color: var(--info_btn_outline_color);
|
|
background-color: var(--info_btn_outline_bg_color);
|
|
border: solid thin var(--info_btn_outline_border_color);
|
|
}
|
|
.btn_outline_info:hover {
|
|
color: var(--info_btn_hover_color);
|
|
background-color: var(--info_btn_hover_bg_color);
|
|
border: solid thin var(--info_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_success {
|
|
color: var(--success_btn_color);
|
|
background-color: var(--success_btn_bg_color);
|
|
border: solid thin var(--success_btn_border_color);
|
|
}
|
|
.btn_success:hover {
|
|
color: var(--success_btn_hover_color);
|
|
background-color: var(--success_btn_hover_bg_color);
|
|
border: solid thin var(--success_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_outline_success {
|
|
color: var(--success_btn_outline_color);
|
|
background-color: var(--success_btn_outline_bg_color);
|
|
border: solid thin var(--success_btn_outline_border_color);
|
|
}
|
|
.btn_outline_success:hover {
|
|
color: var(--success_btn_hover_color);
|
|
background-color: var(--success_btn_hover_bg_color);
|
|
border: solid thin var(--success_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_warning {
|
|
color: var(--warning_btn_color);
|
|
background-color: var(--warning_btn_bg_color);
|
|
border: solid thin var(--warning_btn_border_color);
|
|
}
|
|
.btn_warning:hover {
|
|
color: var(--warning_btn_hover_color);
|
|
background-color: var(--warning_btn_hover_bg_color);
|
|
border: solid thin var(--warning_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_outline_warning {
|
|
color: var(--warning_btn_outline_color);
|
|
background-color: var(--warning_btn_outline_bg_color);
|
|
border: solid thin var(--warning_btn_outline_border_color);
|
|
}
|
|
.btn_outline_warning:hover {
|
|
color: var(--warning_btn_hover_color);
|
|
background-color: var(--warning_btn_hover_bg_color);
|
|
border: solid thin var(--warning_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_danger {
|
|
color: var(--danger_btn_color);
|
|
background-color: var(--danger_btn_bg_color);
|
|
border: solid thin var(--danger_btn_border_color);
|
|
}
|
|
.btn_danger:hover {
|
|
color: var(--danger_btn_hover_color);
|
|
background-color: var(--danger_btn_hover_bg_color);
|
|
border: solid thin var(--danger_btn_hover_border_color);
|
|
}
|
|
|
|
.btn_outline_danger {
|
|
color: var(--danger_btn_outline_color);
|
|
background-color: var(--danger_btn_outline_bg_color);
|
|
border: solid thin var(--danger_btn_outline_border_color);
|
|
}
|
|
.btn_outline_danger:hover {
|
|
color: var(--danger_btn_hover_color);
|
|
background-color: var(--danger_btn_hover_bg_color);
|
|
border: solid thin var(--danger_btn_hover_border_color);
|
|
}
|
|
|
|
/* Button Modifiers */
|
|
.btn.btn_active {
|
|
}
|
|
.btn.btn_disabled {
|
|
/* background-color: var(--site_menu_btn_disabled_bg_color); */
|
|
/* border: solid thin var(--site_menu_btn_disabled_border_color); */
|
|
|
|
font-weight: var(--btn_font_weight_disabled);
|
|
/* color: var(--site_menu_btn_disabled_color); */
|
|
text-decoration: line-through;
|
|
}
|
|
.btn.btn_sm {
|
|
line-height: 1em;
|
|
font-size: .9em;
|
|
}
|
|
.btn.btn_md {
|
|
line-height: 1em;
|
|
font-size: 1em;
|
|
}
|
|
.btn.btn_lg {
|
|
line-height: 1em;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
ul.btn_list>li {
|
|
display: block;
|
|
/* margin: .75rem 0rem; */
|
|
/* padding: 0; */
|
|
}
|
|
ul.btn_list>li:hover {
|
|
outline: dashed thin pink;
|
|
}
|
|
/* *** END *** System *** Buttons *** */
|
|
|
|
|
|
/*x-Small devices (portrait phones, less than 576px)*/
|
|
@media (max-width: 575px) {
|
|
.btn {
|
|
padding: .1em .1em;
|
|
}
|
|
}
|
|
|
|
/*Small devices (landscape phones, 576px and up)*/
|
|
@media (min-width: 576px) and (max-width: 767px) {
|
|
.btn {
|
|
padding: .1em .25em;
|
|
}
|
|
}
|