33 * SPDX-FileCopyrightText: 2025 Stella, whose hairs are shiny and soft. (https://teamcons.carrd.co)
44 */
55
6-
76@define-color textColorPrimary # 323232;
87
8+ @define-color MainColor @BLUEBERRY_ 100;
9+ @define-color SecondaryColor @BLUEBERRY_ 900;
910
1011/* TODO : These only exist to colour the "pills" to select theme. This needs a fixing */
11-
12-
1312.color-strawberry {
1413 background-color: @STRAWBERRY_ 100 ;
1514}
4847
4948
5049
51- /* Idk wth this is */
50+
51+
52+ /* These are the colored pills to select theme */
53+ .color-button {
54+ border-radius : 50% ;
55+ background-image : none;
56+ border : 1px solid alpha (# 333, 0.25 );
57+ box-shadow :
58+ inset 0 1px 0 0 alpha (@inset_dark_color , 0.7 ),
59+ inset 0 0 0 1px alpha (@inset_dark_color , 0.3 ),
60+ 0 1px 0 0 alpha (@bg_highlight_color , 0.3 );
61+ }
62+
63+ .color-button : hover ,
64+ .color_button : focus {
65+ border : 1px solid @inset_dark_color ;
66+ }
67+
68+
69+ .window {
70+ background-color: @MainColor ;
71+ transition : background-color 800ms cubic-bezier (0.4 , 0 , 0.2 , 1 );
72+ }
73+
74+ .window undershoot .top {
75+ background :
76+ linear-gradient (
77+ @MainColor 0% ,
78+ alpha (@MainColor , 0 ) 50%
79+ );
80+ }
81+
82+ .window undershoot .bottom {
83+ background :
84+ linear-gradient (
85+ alpha(@MainColor , 0 ) 50% ,
86+ @MainColor 100%
87+ );
88+ }
89+
90+ .jorts-view text selection {
91+ color : shade (@MainColor , 1.88 );
92+ background-color: @SecondaryColor ;
93+ transition : color 800ms cubic-bezier (0.4 , 0 , 0.2 , 1 );
94+ transition : background-color 800ms cubic-bezier (0.4 , 0 , 0.2 , 1 );
95+ }
96+
5297entry .flat {
5398 background : transparent;
5499}
55100
101+ .window .jorts-title image ,
102+ .window .jorts-label {
103+ color: @SecondaryColor ;
104+ box-shadow : none;
105+ }
106+
107+ .window .jorts-bar {
108+ color: @SecondaryColor ;
109+ background-color: @MainColor ;
110+ border-top-color: @SecondaryColor ;
111+ box-shadow : none;
112+ background-image : none;
113+ padding : 3px ;
114+ transition : background-color 800ms cubic-bezier (0.4 , 0 , 0.2 , 1 );
115+ transition : color 800ms cubic-bezier (0.4 , 0 , 0.2 , 1 );
116+ }
117+
118+ .window .jorts-bar image {
119+ color: @SecondaryColor ;
120+ padding : 3px ;
121+ box-shadow : none;
122+ background-image : none;
123+ }
124+
125+ .window .jorts-view ,
126+ .window .jorts-view text ,
127+ .window .jorts-title {
128+ background-color: @MainColor ;
129+ background-image : none;
130+ border-bottom-color: @SecondaryColor ;
131+ font-weight : 500 ;
132+ font-size : 1.2em ;
133+ color : shade (@SecondaryColor , 0.77 );
134+ box-shadow : none;
135+ }
136+
137+
56138
57139
58- /* These are the various buttons in the interface */
59140.image-button ,
60141.titlebutton {
61142 background-color : transparent;
@@ -75,34 +156,18 @@ entry.flat {
75156 box-shadow : none;
76157}
77158
159+
78160/* This is the EditableLabel */
79161.jorts-label {
80162 font-weight : 700 ;
81163 font-size : 0.88em ;
82164}
83165
84166.jorts-label : backdrop {
85- color : mix (@textColorPrimary , @colorPrimary , 0.3 );
167+ color : mix (@textColorPrimary , @SecondaryColor , 0.3 );
168+ transition : color 800ms cubic-bezier (0.4 , 0 , 0.2 , 1 );
86169}
87170
88171.jorts-bar box {
89172 border : none;
90173}
91-
92-
93-
94- /* These are the colored pills to select theme */
95- .color-button {
96- border-radius : 50% ;
97- background-image : none;
98- border : 1px solid alpha (# 333, 0.25 );
99- box-shadow :
100- inset 0 1px 0 0 alpha (@inset_dark_color , 0.7 ),
101- inset 0 0 0 1px alpha (@inset_dark_color , 0.3 ),
102- 0 1px 0 0 alpha (@bg_highlight_color , 0.3 );
103- }
104-
105- .color-button : hover ,
106- .color_button : focus {
107- border : 1px solid @inset_dark_color ;
108- }
0 commit comments