% ================== DefaultTheme.oss ================== % ==== Variables ==== const $accentColor = #2FB000FF const $textColor = #CCEECCFF const $borderColor = #111111FF const $darkColor = #223322FF const $accentColorLight = #87FF5CFF const $accentColorDark = #3B7500FF const $backgroundColor = rgba(30, 30, 30, 255) % =================== % ====== Root Widget ====== (window) { backgroundColor = $backgroundColor (tooltip) { backgroundColor = #FFF7D6FF borderColor = rgb(30, 30, 30) textColor = rgb(30, 30, 30) borderWidth = 1 fontSize = 20 } } % ========================= % ====== Panel ====== (panel) { backgroundColor = $backgroundColor titleColor = $accentColorDark titlebarColor = $borderColor titlebarBorderColor = $borderColor borderColor = $borderColor borderRadius = 0 borderWidth = 2 titlebarBorderWidth = 2 showBorder = true showBackground = true titlebarType = full titlebarHeight = 35 titlebarFontSize = 18 titlebarTextAlign = text_left scrollSpeed = 1.2 scrollSmoothFactor = 0.7 padding = rect(15, 15, 15, 15) margin = rect(0, 0, 0, 0) } % =================== % ====== TabPanel ====== (tabPanel) { backgroundColor = $backgroundColor borderColor = $borderColor borderRadius = 0 borderWidth = 2 showBorder = true showBackground = true margin = rect(0, 0, 0, 0) textColor = $textColor fontSize = 18 (tabBar) { height = 35.0 backgroundColor = $darkColor borderColor = $borderColor borderWidth = 1 sidePadding = 20.0 } } (@panel_tab panel) { } % ====================== % ====== Scrollbar ====== (scrollbar) { (thumb) { color = $darkColor borderRadius = 30.0 borderColor = $borderColor showBorder = true } (track) { color = #111111FF } width = 18.0 } (scrollbar:hover) { (thumb) { color = $accentColorDark } } (scrollbar:pressed) { (thumb) { color = #225500FF } (track) { color = #001100FF } } % ======================= % ====== CheckBox ====== (checkbox) { checkBorderColor = $accentColorDark checkBoxColor = $accentColor textColor = $textColor fontSize = 20 borderRadius = 0 borderWidth = 0 checkBorderRadius = 6 checkBorderWidth = 2 showBackground = false showBorder = false padding = rect(15, 15, 15, 15) margin = rect(0, 0, 0, 0) } (checkbox:hover) { checkBorderColor = $accentColorLight } (checkbox:pressed) { checkBoxColor = $accentColor textColor = $accentColorDark checkBorderColor = $accentColor } (checkbox:active) { checkBoxColor = $accentColor checkBorderColor = $accentColor textColor = $accentColorDark } % ====================== % ====== RadioButton ====== (radioButton) { innerCircleColor = $accentColorDark outerCircleColor = $accentColor outerCircleBorderWidth = 2 textColor = $textColor fontSize = 20 showBackground = false showBorder = false padding = rect(4, 4, 4, 4) margin = rect(0, 0, 0, 0) } (radioButton:hover) { outerCircleColor = $accentColorLight } (radioButton:pressed) { outerCircleColor = $accentColor textColor = $accentColorDark innerCircleColor = $accentColor } (radioButton:active) { innerCircleColor = $accentColor outerCircleColor = $accentColor textColor = $accentColorDark } % ========================= % ====== Label ====== (label) { textColor = $textColor fontSize = 20 borderRadius = 0 borderWidth = 0 showBackground = false showBorder = false padding = rect(15, 15, 15, 15) margin = rect(0, 0, 0, 0) } % =================== % ====== Button ====== (button) { textColor = $textColor backgroundGradient = gradientV($accentColor - $accentColorDark) borderColor = $accentColorDark fontSize = 20 borderRadius = 0 borderWidth = 1 showBackground = false showBorder = true useBackgroundGradient = true padding = rect(5, 5, 5, 5) margin = rect(0, 0, 0, 0) showIcon = false (icon) { } } (button:hover) { borderColor = $accentColorLight } (button:pressed) { borderColor = $accentColorDark textColor = #BBBBBBFF backgroundGradient = gradientV($accentColorDark - $accentColor) } % ==================== % ====== Image ====== (image) { } % =================== % ====== ProgressBar ====== (progressbar) { borderColor = $accentColor borderWidth = 1 showDecimal = false showText = true useBackgroundGradient = true backgroundGradient = gradientV($darkColor - $accentColorDark) useProgressGradient = true progressGradient = gradientV($accentColor - $accentColorDark) } % ========================= % ====== Slider ====== (slider) { (handle) { color = $accentColor size = vec2(10, 18) } (track) { color = $accentColorDark progressColor = $accentColor width = 6.0 } showStepTicks = true stepTickHeight = 6.0 stepTickColor = $accentColor padding = rect(5, 5, 5, 5) } % =================== % ====== Context Menu ====== (context) { padding = rect(16, 0, 16, 0) itemSpacing = 6.0 fontSize = 18 backgroundColor = $darkColor selectionColor = $accentColor selectionTextColor = $accentColorLight separatorLineColor = $borderColor textColor = $textColor submenuIndicatorColor = $accentColorDark borderColor = $borderColor useSelectionGradient = true selectionGradient = gradientV($accentColor - $accentColorDark) animateOpen = true animationDelay = 120 } % ========================== % ====== MenuBar ====== (menubar) { height = 24.0 itemPadding = rect(0, 0, 15, 0) fontSize = 16 backgroundColor = $darkColor textColor = $textColor selectionColor = $accentColor selectionTextColor = $accentColorLight showBorder = false borderColor = $borderColor } % ===================== % ====== ToolBar ====== (toolbar) { height = 30.0 fontSize = 16 backgroundColor = $darkColor textColor = $textColor selectionColor = $accentColor selectionTextColor = $accentColorLight borderColor = $borderColor showBorder = true showBackground = true } (@tool_button button) { fontSize = 18 padding = rect(5, 0, 5, 0) margin = rect(5, 0, 0, 0) showBackground = true backgroundColor = $darkColor useBackgroundGradient = false showBorder = false borderColor = color_black showIcon = true (icon) { tint = $accentColorLight } } (@tool_button button:hover) { borderColor = $textColor backgroundColor = $accentColorDark showBorder = true (icon) { tint = $textColor } } (@tool_button button:pressed) { borderColor = $accentColorDark showBorder = true (icon) { tint = $accentColorLight } } % ===================== % ====== ComboBox ====== (combo) { borderColor = $accentColor backgroundColor = $darkColor borderWidth = 1 showBackground = true showBorder = true triangleIndicatorColor = $accentColor triangleIndicatorPadding = 8.0 textColor = $textColor fontSize = 18 } (combo:hover) { triangleIndicatorColor = $accentColorLight borderColor = $accentColorLight } (combo:active) { triangleIndicatorColor = $accentColorLight borderColor = $accentColorLight } % ====================== % ====== TreeView ====== (tree) { linePadding = rect(5, 5, 0, 0) selectionColor = $accentColor selectionTextColor = color_white iconSpacing = 0.0 iconInset = 4 showIcons = true fontSize = 16 textColor = $textColor backgroundColor = $darkColor backgroundColor2 = $darkColor.lighten(0.06) showAlternatingBackground = true borderColor = $borderColor separatorLineColor = $borderColor showSeparatorLine = false iconTintColor = $accentColorLight indentWidth = 16.0 chevronColor = $accentColorDark chevronInset = 4.0 branchLineColor = $textColor showBranchLines = true branchLineThickness = 1.0 } % ======================