/*
* Project Name : Visual Python
* Description : GUI-based Python code generator
* File Name : root.css
* Author : Black Logic
* Note : stylesheet for initializing global style variables
* usage) background: var(--declared-variable-name);
* License : GNU GPLv3 with Visual Python special exception
* Date : 2021. 09. 13
* Change Date :
*/
:root {
--vp-border-gray-color: #E4E4E4;
--vp-grid-line-color: #E4E4E4;
--vp-background-hover-color: #E4E4E4;
--vp-light-gray-color: #F5F5F5;
--vp-highlight-color: #F6AD55;
--vp-gray-color: #C4C4C4;
--vp-font-highlight: #F38504;
--vp-font-primary: #696969;
--vp-background-color: #FFFFFF;
--vp-logo-url: url(../../visualpython/img/logo.png);
}
/* Font */
/* Logo */
@font-face {
font-family: Foglihten;
/* LAB: truetype to font-opentype */
src: url(../fonts/Foglihten-068.otf) format("font-opentype");
font-style: normal;
font-weight: 500;
}
/* Headlines, Body, Componenets */
@font-face {
font-family: AppleSDGothicNeo;
/* LAB: truetype to font-truetype */
src: url(../fonts/AppleSDGothicNeoM.ttf) format("font-truetype");
}
/* Codes */
@font-face {
font-family: Consola;
/* LAB: truetype to font-truetype */
src: url(../fonts/consola.ttf) format("font-truetype");
}
/* font style */
.vp-primary-text {
color: var(--vp-font-primary);
}
.vp-orange-text {
color: var(--vp-font-highlight);
}
.vp-gray-text {
color: var(--vp-gray-color);
}
.vp-italic {
font-style: italic;
}
.vp-bold {
font-weight: bold;
}
.vp-center {
text-align: center;
}
.vp-vertical-text {
vertical-align: text-bottom;
}
/* Body */
body {
overflow: hidden;
}
/* Jupyter Toolbar Icon */
/* com_Const.TOOLBAR_BTN_INFO.ID */
#vpBtnToggle i {
background-image: url(../../visualpython/img/icon.png);
background-size: contain;
display: inline-block;
width: 10px;
height: 10px;
}
/* common component style */
input.vp-input {
font-size: 14px;
line-height: 16px;
height: 30px;
padding: 3px 7px;
color: var(--vp-font-primary);
background-color: var(--vp-background-color);
outline-color: var(--vp-highlight-color);
border: 0.25px solid var(--vp-border-gray-color);
box-sizing: border-box;
}
input.vp-input::placeholder {
color: var(--vp-gray-color);
}
input.vp-input:disabled,
select.vp-select:disabled {
background-color: var(--vp-light-gray-color);
cursor: not-allowed;
}
/* image icons */
/* LAB: img to background-image */
.vp-icon-package-manager {
background: center / contain no-repeat url(../img/package_manager.svg);
width: 20px;
height: 20px;
}
.vp-icon-install {
background: center / contain no-repeat url(../img/import.svg);
width: 16px;
height: 16px;
}
.vp-icon-setting {
background: center / contain no-repeat url(../img/setting.svg);
width: 100%;
height: 100%;
}
.vp-icon-refresh {
background: top / contain no-repeat url(../img/refresh.svg);
height: 100%;
}
.vp-icon-arrow-right-double {
background: center / contain no-repeat url(../img/arrow_right_double.svg);
width: 15px;
height: 15px;
}
.vp-icon-arrow-left-double {
background: center / contain no-repeat url(../img/arrow_left_double.svg);
width: 15px;
height: 15px;
}
.vp-icon-arrow-right {
background: center / contain no-repeat url(../img/arrow_right.svg);
width: 15px;
height: 15px;
}
.vp-icon-arrow-left {
background: center / contain no-repeat url(../img/arrow_left.svg);
width: 15px;
height: 15px;
}
.vp-icon-arrow-short-up {
background: center / contain no-repeat url(../img/arrow_short_up.svg);
width: 15px;
height: 15px;
}
.vp-icon-chevron-down {
background: center / contain no-repeat url(../img/chevron_big_down.svg);
width: 15px;
height: 15px;
}
.vp-icon-chevron-up {
background: center / contain no-repeat url(../img/chevron_big_up.svg);
width: 15px;
height: 15px;
}
.vp-icon-run {
background: center / contain no-repeat url(../img/snippets/run.svg);
width: 16px;
height: 16px;
}
.vp-icon-run.white {
background: center / contain no-repeat url(../img/snippets/run_white.svg);
}
.vp-icon-save {
background: center / contain no-repeat url(../img/snippets/save_orange.svg);
width: 16px;
height: 16px;
}
.vp-icon-save.vp-disable {
background: center / contain no-repeat url(../img/snippets/save_gray.svg);
}
.vp-icon-export {
background: center / contain no-repeat url(../img/snippets/export.svg);
width: 16px;
height: 16px;
}
.vp-icon-duplicate {
background: center / contain no-repeat url(../img/snippets/duplicate.svg);
width: 16px;
height: 16px;
}
.vp-icon-delete {
background: center / contain no-repeat url(../img/delete.svg);
width: 16px;
height: 16px;
}
.vp-icon-plus {
background: center / contain no-repeat url(../img/plus.svg);
width: 16px;
height: 16px;
}
.vp-icon-filter {
background: center / contain no-repeat url(../img/filter.svg);
width: 16px;
height: 16px;
}
.vp-icon-close-big {
background: top / contain no-repeat url(../img/close_big.svg);
width: 23px;
height: 23px;
}
.vp-icon-close-small {
background: center / contain no-repeat url(../img/close_small.svg);
width: 15px;
height: 15px;
}
.vp-icon-upgrade {
background: center / contain no-repeat url(../img/upgrade.svg);
width: 16px;
height: 16px;
}
.vp-icon-numeric {
background: center / contain no-repeat url(../img/numeric.svg);
display: inline-block;
width: 16px;
height: 16px;
}
.vp-icon-non-numeric {
background: center / contain no-repeat url(../img/non_numeric.svg);
display: inline-block;
width: 16px;
height: 16px;
}
.vp-file-browser-button {
width: 22px;
height: 22px;
margin-left: 7px;
display: inline-block;
cursor: pointer;
vertical-align: middle;
content: url(../img/folder_open.svg);
background-position: 50% 50%;
background-repeat: no-repeat;
border: none;
}
.vp-file-browser-button:hover {
content: url(../img/folder_open_hover.svg);
}
.vp-file-browser-button.disabled {
content: url(../img/folder_open_disabled.svg);
}
select.vp-select {
height: 30px;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
padding: 5px 16px 3px 9px;
background: url(../img/unfold_more.svg), #F5F5F5;
background-position: 94% 50%;
background-size: 11px 11px;
background-repeat: no-repeat;
outline: none;
border: 0.25px solid var(--vp-border-gray-color);
border-radius: 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
select.vp-select::-ms-expand {
display: none;
}
/* Select Option Design */
select.vp-select * {
background-color: var(--vp-background-color);
color: #696969;
}
/* Input & Select Design - width m&s */
.vp-input.l,
.vp-select.l {
width: 232px !important;
}
.vp-input.m,
.vp-select.m {
width: 116px !important;
}
.vp-input.sm,
.vp-select.sm {
width: 70px !important;
}
.vp-input.s,
.vp-select.s {
width: 55px !important;
}
/* Buttons */
input.vp-button,
button.vp-button {
min-width: 80px;
width: fit-content;
height: 30px;
background-color: var(--vp-background-color);
border: 0.25px solid var(--vp-border-gray-color);
box-sizing: border-box;
box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 10%);
border-radius: 3px;
line-height: 30px;
vertical-align: middle;
font-family: 'AppleSDGothicNeo';
/* font-size: 14px; */
font-size: 13px; /* LAB: font-size */
text-align: center;
color: #696969;
cursor: pointer;
/* No-selection allowed for buttons */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
.vp-button:hover {
background-color: #F8F8F8;
}
.vp-button.cancel {
background-color: #E5E5E5;
border: 0px;
}
.vp-button.cancel:hover {
background-color: #DEDEDE;
}
.vp-button.add {
background-color: var(--vp-background-color);
}
.vp-button.add:hover {
background-color: #F8F8F8;
}
.vp-button.activated {
background-color: #F38504;
border: 0px;
color: #FFFFFF;
}
.vp-button.activated:hover {
background-color: #EF6B10;
}
.vp-button.disabled,
.vp-button.disabled:hover,
.vp-button:disabled,
.vp-button:disabled:hover {
background-color: #E5E5E5;
border: 0px;
border: 0.25px solid var(--vp-border-gray-color);
color: #696969;
cursor: not-allowed;
}
.vp-button.activated.disabled {
background-color: #FFC09A;
color: white;
}
.vp-checkbox {
display: inline-block;
position: relative !important;
width: 13px;
height: 13px;
border: 1px solid #828282;
margin: 0px 15px;
}
/* Scrollbar */
.vp-scrollbar {
overflow-y: auto;
--webkit-mask-position: left top;
}
.vp-scrollbar::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.vp-scrollbar::-webkit-scrollbar-thumb {
border: 0.3px solid #C4C4C4;
background: #C4C4C4;
}
/* Scrollbar vertical only */
.vp-scrollbar-vertical {
overflow-x: hidden;
overflow-y: auto;
white-space: nowrap;
--webkit-mask-position: left top;
}
.vp-scrollbar-vertical::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.vp-scrollbar-vertical::-webkit-scrollbar-thumb {
border: 0.3px solid #C4C4C4;
background: #C4C4C4;
}
/* Scrollbar horizontal */
.vp-scrollbar-horizontal {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
--webkit-mask-position: left top;
}
.vp-scrollbar-horizontal::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.vp-scrollbar-horizontal::-webkit-scrollbar-thumb {
border: 0.3px solid #C4C4C4;
background: #C4C4C4;
}
/* Accordian Box */
.vp-accordian {
cursor: pointer;
}
.vp-accordian .vp-indicator {
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
width: 10px;
height: 10px;
}
.vp-accordian.vp-open .vp-indicator {
background-image: url(../../visualpython/img/chevron_big_down.svg);
}
.vp-accordian.vp-close .vp-indicator {
background-image: url(../../visualpython/img/chevron_big_right.svg);
}
.vp-accordian .vp-accordian-caption {
font-weight: bold;
color: var(--vp-font-primary);
margin-left: 5px;
}
.vp-accordian.vp-close + .vp-accordian-box {
display: none !important;
}
.vp-accordian.vp-open + .vp-accordian-box {
display: block !important;
}
/*
* Dropdown menus
* - Usage: set these structure using tag's class
*