Files
lmms/data/themes/default/style.css
Michael Gregorius ec95ef1ba9 Implements #2635: Draws a transparent rectangle in the loop area (plus CSS exposure) (#2657)
* Draws a transparent rectangle in the loop area (plus CSS exposure)

The color for the rectangle can be defined in the style CSS for the
active and inactive case. The following properties of the TimeLineWidget
are exposed through the CSS:
- The color of the lines that are drawn for each bar
- The color of the bar numbers
- The font size (given in pt)
- The minimum and the maximum height of the widget (given in em so that it scales with the font size). Set both to the same value to set a fixed size.
- The background of the widget
- A loop color: The color for the main rectangle's pen
- A loop brush: The brush used to fill the main rectangle
- An inner loop color: The color used for the pen that draws the inner border.
- loopRectangleVerticalPadding: specifies the padding used for the loop indicator rectangle.

The bar numbers are drawn conditionally like the bar lines. The
numbers are drawn with a constant distance to the tact line. This gives
a more consistent picture at different zoom levels and also fixes the
broken look at very small zoom sizes like for example 12.5%.

The bar numbers are drawn with hinting so that they show up less blurry on low DPI displays.

Remove the pixmaps that have been used up to now to draw the loop
boundaries.

Removes the unused "TimeLine" from style.css.

Document the style sheet properties for the loop indicator rectangle.
2016-06-12 18:13:23 +02:00

860 lines
19 KiB
CSS
Executable File

/********************
* LMMS style sheet *
********************/
/* most foreground text items */
QLabel, QTreeWidget, QListWidget, QGroupBox, QMenuBar {
color: #d1d8e4;
}
QMdiArea {
background-color: #121314;
}
AutomationEditor {
background-color: #040506;
color: #ffffff;
qproperty-vertexColor: #7f0a1d;
qproperty-gridColor: #2d3339;
qproperty-crossColor: #FE143A;
qproperty-graphColor: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(83,7,19,255), stop:1 rgba(127,10,29,50));
qproperty-scaleColor: #262b30;
}
/* text box */
QLineEdit {
border-radius: 4px;
border: 1px;
background: #101213;
color: #d1d8e4;
}
/* text box when it wants text */
QLineEdit:focus {
border: 1px solid #0bd556;
}
QToolTip {
border-radius: 4px;
background: #040506;
color: #d1d8e4;
}
TextFloat {
background: #040506;
color: #d1d8e4;
}
QMenu {
border-top: 2px solid #08993E;
background-color: #15191c;
font-size: 11px;
}
QMenu::separator {
height: 1.0px;
background: #323940;
margin-left: 0x;
margin-right: 0px;
}
QMenu::item {
color: #d1d8e4;
padding: 2px 35px 2px 23px;
margin: 3px 0px 3px 0px;
}
QMenu::item:selected {
color: #d1d8e4;
font-weight: normal;
background-color: #21272b;
}
QMenu::item:disabled {
color: #515459;
background-color: #262b30;
font-size: 12px;
font-weight: normal;
padding: 4px 32px 4px 20px;
}
QMenu::icon {
margin: 3px;
}
QMenu::indicator {
width: 16;
height: 16;
opacity: 0;
border: 1px solid #101213;
border-radius: 2px;
background-color: #101213;
}
QMenu::indicator:checked {
image: url("resources:apply.png");
}
QMenu::indicator:selected {
image: url("resources:apply-selected.png");
border: 1px solid #101213;
background-color: #101213;
}
PianoRoll {
background-color: #040506;
qproperty-gridColor: #2d3339;
qproperty-noteModeColor: #0bd556;
qproperty-noteColor: #0bd556;
qproperty-noteOpacity: 165;
qproperty-noteBorders: false; /* boolean property, set false to have borderless notes */
qproperty-selectedNoteColor: #006b65;
qproperty-barColor: #078f3a;
qproperty-markedSemitoneColor: #06170E;
/* Text on the white piano keys */
qproperty-textColor: #000;
qproperty-textColorLight: #0bd556;
qproperty-textShadow: #fff;
}
/* main toolbar oscilloscope - can have transparent bg now */
VisualizationWidget {
background: none;
border: none;
}
/* main toolbar cpu load widget - this can have transparent bg now */
CPULoadWidget {
border: none;
background: url(resources:cpuload_bg.png);
}
/* scrollbar: trough */
QScrollBar:horizontal {
border-top: 3px solid #262b30;
background: #262b30;
height: 12px;
margin: 0px 12px;
}
QScrollBar:vertical {
border-left: 3px solid #262b30;
background: #262b30;
width: 12px;
margin: 12px 0px;
}
/* scrollbar: trough clicky things */
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal,
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
}
QScrollBar::add-page:horizontal:pressed, QScrollBar::sub-page:horizontal:pressed,
QScrollBar::add-page:vertical:pressed, QScrollBar::sub-page:vertical:pressed {
background: rgba(0,0,0,50);
}
/* scrollbar: handles (sliders) */
QScrollBar::handle:horizontal {
background: #3f4750;
border: none;
border-radius: 4px;
min-width: 24px;
}
QScrollBar::handle:horizontal:hover {
background: #525e69;
}
QScrollBar::handle:horizontal:pressed {
background: rgba(11,213,86,100);
}
QScrollBar::handle:vertical {
background: #3f4750;
border: none;
border-radius: 4px;
min-height: 24px;
}
QScrollBar::handle:vertical:hover {
background: #525e69;
}
QScrollBar::handle:vertical:pressed {
background: rgba(11,213,86,100);
}
QScrollBar::handle:horizontal:disabled, QScrollBar::handle:vertical:disabled {
background: #262b30;
border-radius: 1px;
border: none;
}
/* arrow buttons */
QScrollBar::add-line, QScrollBar::sub-line {
background: #262b30;
border-radius: 0px;
border: none;
subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal { subcontrol-position: right; width: 12px;}
QScrollBar::sub-line:horizontal { subcontrol-position: left; width: 12px;}
QScrollBar::add-line:vertical { subcontrol-position: bottom; height: 12px;}
QScrollBar::sub-line:vertical { subcontrol-position: top; height: 12px;}
QScrollBar::add-line:hover, QScrollBar::sub-line:hover {
background: #262b30;
}
QScrollBar::add-line:pressed, QScrollBar::sub-line:pressed {
background: #262b30;
}
QScrollBar::add-line:disabled, QScrollBar::sub-line:disabled {
background: #262b30;
}
/* arrow button arrows */
QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal,
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
border: none;
background-color: none;
width: 5px;
height: 5px;
}
QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
margin-top: 3px;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
margin-left: 3px;
}
QScrollBar::left-arrow:horizontal { background-image: url(resources:sbarrow_left.png);}
QScrollBar::right-arrow:horizontal { background-image: url(resources:sbarrow_right.png);}
QScrollBar::up-arrow:vertical { background-image: url(resources:sbarrow_up.png);}
QScrollBar::down-arrow:vertical { background-image: url(resources:sbarrow_down.png);}
QScrollBar::left-arrow:horizontal:disabled { background-image: url(resources:sbarrow_left_d.png);}
QScrollBar::right-arrow:horizontal:disabled { background-image: url(resources:sbarrow_right_d.png);}
QScrollBar::up-arrow:vertical:disabled { background-image: url(resources:sbarrow_up_d.png);}
QScrollBar::down-arrow:vertical:disabled { background-image: url(resources:sbarrow_down_d.png);}
/* background for song editor and bb-editor */
TrackContainerView QFrame{
background-color: #262b30;
}
/* autoscroll, loop, stop behaviour toggle buttons */
/* track background colors */
TrackContentWidget {
qproperty-darkerColor: #0C0E0F;
qproperty-lighterColor: #14151A;
qproperty-gridColor: #262B30;
qproperty-embossColor: rgba( 0, 0, 0, 0 );
}
/* gear button in tracks */
TrackOperationsWidget > QPushButton {
max-height: 26px;
max-width: 26px;
min-height: 26px;
min-width: 26px;
background: none;
border: none;
}
TrackOperationsWidget > QPushButton::menu-indicator {
image: url(resources:trackop.png);
subcontrol-origin: padding;
subcontrol-position: center;
position: relative;
top: 2px;
}
TrackOperationsWidget > QPushButton::menu-indicator:hover {
image: url(resources:trackop_h.png);
}
TrackOperationsWidget > QPushButton::menu-indicator:pressed,
TrackOperationsWidget > QPushButton::menu-indicator:checked
{
image: url(resources:trackop_c.png);
position: relative;
top: 3px;
}
/* font sizes */
nameLabel, effectLabel, sf2InstrumentView > QLabel {
font-size:10px;
}
/* main toolbar sliders (master vol, master pitch) */
AutomatableSlider::groove:vertical {
background: #040506;
border: none;
border-radius: 2px;
width: 2px;
margin: 2px 2px;
}
AutomatableSlider::handle:vertical {
background: none;
border-image: url(resources:main_slider.png);
width: 26px;
height: 10px;
border-radius: 2px;
margin: -4px -12px -2px;
}
/* window that shows up when you add effects */
EffectSelectDialog QScrollArea {
background: #262b30;
}
/* the inner boxes in LADSPA effect windows */
EffectControlDialog QGroupBox {
background: #262b30;
margin-top: 1ex;
padding: 10px 2px 1px;
border-radius: 4px;
border: none;
}
/* the inner box titles when present (channel 1, channel 2...) */
EffectControlDialog QGroupBox::title {
subcontrol-origin: margin;
subcontrol-position: top center;
background: #262b30;
color: #d1d8e4;
border-radius: 2px;
border: none;
padding: 2px 1px;
}
/* main toolbar */
QWidget#mainToolbar {
background: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #373f47, stop:1 #1d2122);
}
/* smaller toolbars */
QToolBar {
background: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #434b57, stop:1 #22252c);
border: none;
padding: 2px;
spacing: 0;
}
QToolBar::separator {
border: none;
width: 5px;
}
/* all tool buttons */
QToolButton {
margin: 1px;
padding: 2px 2px 2px 2px;
border-top: 1px solid #778394;
border-bottom: 1px solid #1e2226;
border-radius: 2px;
background: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1 stop:0 #636c7a, stop:1 #343840);
font-size:10px;
color: #fff;
}
QToolButton:hover {
border-top: 1px solid #909eb3;
border-bottom: 1px solid #1e2226;
border-radius: 2px;
background: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #7c8799, stop:1 #343840)
}
QToolButton:pressed {
border-top: 1px solid #778394;
border-bottom: 1px solid #1e2226;
border-radius: 2px;
background: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #636c7a, stop:1 #262b30);
}
QToolButton:checked {
border-top: 1px solid #1b1f22;
border-bottom: 1px solid #4a515e;
background: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #1b1f22, stop:1 #13161a);
background-image: url(resources:shadow_c.png);
}
/* track label buttons - the part that contains the icon and track title */
TrackLabelButton {
border: 1px solid #262b30;
background-color: #262b30;
border-radius: none;
font-size: 11px;
font-weight: normal;
padding: 2px 1px;
}
TrackLabelButton:hover {
background: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #333940, stop:1 #262b30);
border: 1px solid #262b30;
border-radius: none;
font-size: 11px;
font-weight: normal;
padding: 2px 1px;
}
TrackLabelButton:pressed {
background: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #262B30, stop:1 #1E2326);
font-size: 11px;
font-weight: normal;
padding: 2px 1px;
}
TrackLabelButton:checked {
border: 1px solid #2f353b;
background: #14171a;
background-image: url(resources:track_shadow_c.png);
font-size: 11px;
font-weight: normal;
padding: 2px 1px;
}
TrackLabelButton:checked:pressed {
border: 1px solid #2f353b;
background: #0e1012;
background-image: url(resources:track_shadow_c.png);
font-size: 11px;
padding: 2px 1px;
font-weight: solid;
}
/* sidebar, sidebar buttons */
SideBar {
subcontrol-position: center;
background: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #1D2122, stop:1 #111314);
}
SideBar QToolButton {
background: none;
border: none;
font-size: 12px;
}
SideBar QToolButton:hover {
background: none;
border: none;
font-size: 12px;
}
SideBar QToolButton:pressed {
background: none;
border: none;
font-size: 12px;
}
SideBar QToolButton:checked {
background: none;
border: none;
font-size: 12px;
}
/* Instrument plugin list */
PluginDescList {
background-color: #131517;
}
PluginDescWidget {
border-top: 1px solid #323940;
border-bottom: 1px solid #101314;
border-radius: 2px;
background-color: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #262B30, stop:1 #1E2326);
color: #d1d8e4;
font-weight: bold;
margin: 0px;
}
PluginDescWidget:hover {
background-color: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #262B30, stop:1 #1E2326);
color: #d1d8e4;
}
/* piano widget */
PianoView {
background-color: #14171a;
}
/* font sizes for text buttons */
FxMixerView QPushButton, EffectRackView QPushButton, ControllerRackView QPushButton {
font-size: 10px;
}
FxLine {
background: #14161A;
color: #d1d8e4;
qproperty-backgroundActive: qlineargradient(spread:reflect, x2:0, y1:0, x2:0, y2:1, stop:0 #21242B, stop:1 #14161A);
qproperty-strokeOuterActive: #262B30;
qproperty-strokeOuterInactive: #262B30;
qproperty-strokeInnerActive: #0C0D0F;
qproperty-strokeInnerInactive: #0C0D0F;
}
/* persistent peak markers for fx peak meters */
Fader {
qproperty-peakGreen: #0BD556;
qproperty-peakRed: #660505;
}
TimeLineWidget {
/* font-size only supports px and pt. */
font-size: 7pt;
/* lengths also support em. This will make sure that the height
will always change in the same proportion as the font size
defined above.
If you want a fixed size set min and max to the same value. */
min-height: 1.5em;
max-height: 1.5em;
/* Properties for the loop indicator rectangle in inactive state:
- LoopColor: Color of the outermost border
- LoopBrush: Brush to paint the main portion of the rectangle
- LoopInnerColor: Color used to paint the inlayed border */
qproperty-inactiveLoopColor: #3B424A;
qproperty-inactiveLoopBrush: #3B424A;
qproperty-inactiveLoopInnerColor: #3B424A;
/* Properties for the loop indicator rectangle in active state.
See above for detailed description. */
qproperty-activeLoopColor: #21A14F;
qproperty-activeLoopBrush: #21A14F;
qproperty-activeLoopInnerColor: #21A14F;
/* Vertical padding for the loop indicator rectangle.
A value of zero draws the rectangle at the full height of the widget. */
qproperty-loopRectangleVerticalPadding: 1;
qproperty-barLineColor: rgb( 192, 192, 192 );
qproperty-barNumberColor: rgb( 192, 192, 192 );
}
QTreeView {
alternate-background-color: #111314;
}
TrackContainerView QLabel
{
background: none;
}
/* Patterns */
/* common pattern colors */
TrackContentObjectView {
qproperty-mutedColor: rgb(255,255,255,100);
qproperty-mutedBackgroundColor: #0A0B0D;
qproperty-selectedColor: #006B65;
qproperty-textColor: #fff;
qproperty-textShadowColor: rgb(0,0,0,200);
qproperty-gradient: false; /* boolean property, set true to have a gradient */
}
/* instrument pattern */
PatternView {
background-color: #21A14F;
color: rgba(255,255,255,220);
}
/* sample track pattern */
SampleTCOView {
background-color: #261657;
color: #100A26;
}
/* automation pattern */
AutomationPatternView {
background-color: #4D0818;
color: rgba(0,0,0,130);
}
/* bb-pattern */
BBTCOView {
background-color: #20BDB2; /* default colour for bb-tracks */
}
/* Subwindows in MDI-Area */
SubWindow {
color: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #3D454F, stop:1 #262B30);
qproperty-activeColor: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #202329, stop:1 #14171A);
qproperty-textShadowColor: #000;
qproperty-borderColor: #323940;
}
/* Subwindow title text */
SubWindow > QLabel {
color: #d1d8e4;
font-size: 12px;
font-style: normal;
}
/* SubWindow titlebar button */
SubWindow > QPushButton {
background-color: rgba( 255, 255, 255, 0% );
border-width: 0px;
border-color: none;
border-style: none;
}
SubWindow > QPushButton:hover{
background-color: rgba( 255, 255, 255, 15% );
border-width: 1px;
border-color: rgba( 0, 0, 0, 20% );
border-style: solid;
border-radius: 2px;
}
/* Plugins */
TripleOscillatorView Knob {
color: rgb(255,255,255);
qproperty-outerColor: rgb(255,255,255);
qproperty-innerRadius: 2;
qproperty-outerRadius: 7;
qproperty-centerPointX: 13.0;
qproperty-centerPointY: 14.0;
qproperty-lineWidth: 2;
}
kickerInstrumentView Knob#smallKnob {
color: #595959;
qproperty-outerColor: black;
qproperty-innerRadius: 3;
qproperty-outerRadius: 11.0;
qproperty-centerPointX: 14.5;
qproperty-centerPointY: 14.5;
qproperty-lineWidth: 2;
}
kickerInstrumentView Knob#largeKnob {
color: #0c3b89;
qproperty-outerColor: #519fff;
qproperty-innerRadius: 12.0;
qproperty-outerRadius: 14.5;
qproperty-centerPointX: 17.0;
qproperty-centerPointY: 17.0;
qproperty-lineWidth: 3;
}
AudioFileProcessorView Knob {
color: rgb(240, 147, 14);
qproperty-outerColor: rgb(30, 35, 37);
qproperty-innerRadius: 4;
qproperty-outerRadius: 11.2;
qproperty-centerPointX: 18.5;
qproperty-centerPointY: 16.5;
qproperty-lineWidth: 3;
}
organicInstrumentView Knob {
color: rgb(124, 207, 98);
qproperty-outerColor: rgb(13, 42, 4);
qproperty-innerRadius: 2;
qproperty-outerRadius: 7.5;
qproperty-centerPointX: 10.5;
qproperty-centerPointY: 10.5;
qproperty-lineWidth: 1.5;
}
organicInstrumentView Knob#harmKnob {
color: rgb(205, 98, 216);
qproperty-outerColor: rgb(18, 4, 18);
}
organicInstrumentView Knob#fx1Knob,
organicInstrumentView Knob#volKnob {
color: rgb(157, 157, 157);
qproperty-outerColor: rgb(37, 37, 37);
qproperty-innerRadius: 4;
qproperty-outerRadius: 10.0;
qproperty-centerPointX: 18.5;
qproperty-centerPointY: 13.8;
qproperty-lineWidth: 2;
}
sf2InstrumentView Knob {
color: #ff00ea;
qproperty-outerColor: rgb(20, 5, 18);
qproperty-innerRadius: 2;
qproperty-outerRadius: 9.2;
qproperty-centerPointX: 15.5;
qproperty-centerPointY: 15.42;
qproperty-lineWidth: 2;
}
sfxrInstrumentView Knob {
color: #000;
qproperty-outerColor: rgb(194, 177, 145);
qproperty-innerRadius: 2;
qproperty-outerRadius: 9;
qproperty-lineWidth: 2;
}
sfxrInstrumentView Knob#envKnob {
color: #263352;
qproperty-outerColor: #4b66a4;
}
sfxrInstrumentView Knob#freqKnob {
color: #1e4a22;
qproperty-outerColor: #3c9544;
}
sfxrInstrumentView Knob#changeKnob {
color: #591c1c;
qproperty-outerColor: #b23737;
}
sfxrInstrumentView Knob#sqrKnob {
color: #3b2714;
qproperty-outerColor: #724c27;
}
sfxrInstrumentView Knob#repeatKnob {
color: #292929;
qproperty-outerColor: #515151;
}
sfxrInstrumentView Knob#phaserKnob {
color: #144c4d;
qproperty-outerColor: #299899;
}
sfxrInstrumentView Knob#filterKnob {
color: #47224c;
qproperty-outerColor: #8e4397;
}
opl2instrumentView Knob {
color: rgb(128,128,128);
qproperty-outerColor: rgb(255,255,255);
qproperty-innerRadius: 2;
qproperty-outerRadius: 9;
qproperty-lineWidth: 2;
}
sidInstrumentView Knob {
color: rgb(113,95,80);
qproperty-outerColor: rgb( 255,255,255 );
qproperty-innerRadius: 2;
qproperty-outerRadius: 7;
qproperty-lineWidth: 2;
}
WatsynView Knob {
qproperty-innerRadius: 1;
qproperty-outerRadius: 7;
qproperty-centerPointX: 9.5;
qproperty-centerPointY: 9.5;
qproperty-lineWidth: 2;
}
WatsynView Knob#aKnob {
color: #43b2ff;
qproperty-outerColor: #43b2ff;
}
WatsynView Knob#bKnob {
color: #fc5431;
qproperty-outerColor: #fc5431;
}
WatsynView Knob#mixKnob {
color: #43ff82;
qproperty-outerColor: #43ff82;
qproperty-outerRadius: 13;
qproperty-centerPointX: 15.5;
qproperty-centerPointY: 15.5;
}
WatsynView Knob#mixenvKnob {
color: #43ff82;
qproperty-outerColor: #43ff82;
}
WatsynView Knob#xtalkKnob {
color: #fb50fb;
qproperty-outerColor: #fb50fb;
}
MonstroView Knob {
color: #ffffff;
qproperty-outerColor: #aaaaaa;
qproperty-outerRadius: 9;
qproperty-innerRadius: 6;
qproperty-centerPointX: 10;
qproperty-centerPointY: 10;
qproperty-lineWidth: 2.5;
}
NesInstrumentView Knob {
color: #e7231b;
qproperty-outerColor: #fff;
qproperty-outerRadius: 11.0;
qproperty-innerRadius: 8.0;
qproperty-centerPointX: 14.5;
qproperty-centerPointY: 14.5;
qproperty-lineWidth: 2;
}
/* palette information */
LmmsPalette {
qproperty-background: #262b30;
qproperty-windowText: #1de276;
qproperty-base: #101213;
qproperty-text: #d1d8e4;
qproperty-button: #3f4750;
qproperty-shadow: rgb(0,0,0);
qproperty-buttonText: #d1d8e4;
qproperty-brightText: #d1d8e4;
qproperty-highlight: #262b30;
qproperty-highlightedText: #d1d8e4;
/* the next two are used for whatsthis dialogs */
qproperty-toolTipText: #d1d8e4;
qproperty-toolTipBase: #101213;
}