44 --satus-theme-primary : # f6b465 ;
55 /*--satus-theme-on-surface: #fafafa;*/
66}
7- /*--------------------------------------------------------------
8- >>> TABLE OF CONTENTS:
9- ----------------------------------------------------------------
7+ /*---------------------------------------------------------------
8+ >>> BASIC
9+ -----------------------------------------------------------------
1010# Fonts
11- # Basic
12- --------------------------------------------------------------*/
11+ # Body
12+ --------------------------------------------------------------- */
1313
14- /*--------------------------------------------------------------
14+ /*---------------------------------------------------------------
1515# FONTS
16- --------------------------------------------------------------*/
16+ --------------------------------------------------------------- */
1717
1818@font-face
1919{
3232}
3333
3434
35- /*--------------------------------------------------------------
36- # BASIC
37- --------------------------------------------------------------*/
35+ /*---------------------------------------------------------------
36+ # BODY
37+ --------------------------------------------------------------- */
3838
3939body
4040{
4545 overflow : hidden;
4646 flex-direction : column;
4747
48- width : 300px ;
49- height : 500px ;
5048 margin : 0 ;
5149}
5250
@@ -273,6 +271,27 @@ body[data-appearance='home'] .satus-text--title
2732712.0 SECTION
274272--------------------------------------------------------------*/
275273
274+ .satus-section--main
275+ {
276+ display : block;
277+
278+ box-sizing : border-box;
279+ width : calc (100% - 16px );
280+ max-width : 900px ;
281+ margin : 8px auto;
282+ padding : 8px 0 ;
283+
284+ color : var (--satus-theme-on-surface , # 777 );
285+ border : 1px solid rgba (0 , 0 , 0 , .1 );
286+ border-radius : 8px ;
287+ background-color : var (--satus-theme-surface , # fff );
288+ }
289+
290+ .satus-text--message
291+ {
292+ padding : 0 16px
293+ }
294+
276295.satus-main .satus-list--label
277296{
278297 font-size : 17px ;
@@ -307,7 +326,7 @@ body[data-appearance='home'] .satus-text--title
307326 width : 100% ;
308327}
309328
310- .satus-button--remove
329+ .satus-main . satus-button . satus- button--remove
311330{
312331 position : absolute;
313332 z-index : 1 ;
@@ -319,11 +338,8 @@ body[data-appearance='home'] .satus-text--title
319338 width : 36px ;
320339 height : 36px ;
321340 padding : 6px ;
322- }
323-
324- .satus-button--remove ::before
325- {
326- border-radius : 50% ;
341+
342+ border-radius : 50%
327343}
328344
329345.satus-main__container .satus-list li .satus-section : hover .satus-button--remove
@@ -443,6 +459,17 @@ body[data-appearance='home'] .satus-text--title
443459 box-shadow : none;
444460}
445461
462+ /*---------------------------------------------------------------
463+ >>> FOOTER
464+ -----------------------------------------------------------------
465+ # Button
466+ # Dialog
467+ ---------------------------------------------------------------*/
468+
469+ /*---------------------------------------------------------------
470+ 1.0 BUTTON
471+ ---------------------------------------------------------------*/
472+
446473.satus-button--create
447474{
448475 position : fixed;
@@ -453,18 +480,16 @@ body[data-appearance='home'] .satus-text--title
453480 height : 56px ;
454481 padding : 0 ;
455482
456- transition : background 500ms 250ms , transform 500ms , box-shadow 525ms ;
457-
458483 color : # fff ;
459484 border-radius : 50% ;
460485 background : linear-gradient (135deg , # f8d266, # f17953 );
461486 box-shadow : 0 2px 1px 1px rgba (230 , 109 , 70 , .7 ), 0 3px 5px rgba (0 , 0 , 0 , .35 );
462487}
463488
464- . satus-button--create :: before
465- {
466- content : none;
467- }
489+
490+ /*---------------------------------------------------------------
491+ 2.0 DIALOG
492+ ---------------------------------------------------------------*/
468493
469494.satus-dialog--create .satus-text
470495{
@@ -476,7 +501,7 @@ body[data-appearance='home'] .satus-text--title
476501
477502.satus-dialog--create .satus-text-field
478503{
479- font-size : 1 rem ;
504+ font-size : 16 px ;
480505
481506 width : calc (100% - 32px );
482507 margin : 8px 16px ;
@@ -500,7 +525,8 @@ body[data-appearance='home'] .satus-text--title
500525
501526.satus-dialog--create .satus-button
502527{
503- font : 600 .875rem 'Open Sans' ;
528+ font-size : 14px ;
529+ font-weight : 600 ;
504530
505531 overflow : hidden;
506532
@@ -516,8 +542,3 @@ body[data-appearance='home'] .satus-text--title
516542{
517543 background-color : rgba (0 , 0 , 0 , .03 );
518544}
519-
520- .satus-dialog--create .satus-button ::before
521- {
522- content : none;
523- }
0 commit comments