Jinwoo Choi
최진우 블로그
Jinwoo Choi
전체 방문자
27,416
오늘
4
어제
30
  • Category
    • Business
      • 인사이트
      • 생각정리
      • 회고
      • 성과 및 업데이트
      • 법인운영과 투자공부
      • HR
      • News
      • Invest
    • Brand
      • 카페 로그
      • 롱블랙 로그
      • 국내 회사 공부
    • Dev
      • 코드와 개발 이야기
      • css
      • javascript
      • react, vue
      • go
      • cloud
      • linux
      • algorithm
      • python
      • VSCode
      • cinema4d
      • 3dsmax
      • git
      • 협업 툴 & 업무환경
      • mac
    • Art
      • 디자인
      • 예술과 건축, 철학 그리고 공간
      • 클래식 이야기
    • 기타
      • 낙서와 회고 (비공개)
      • 역사 메모
      • 영어 메모
      • 여행 로그
      • 신체 및 건강

블로그 메뉴

  • About

인기 글

  • [slack] 슬랙 이모지 모음 url
    2022.08.26
    [slack] 슬랙 이모지 모음 url
  • [2021 예비창업패키지] 2차 합격 후기 (코로나 시즌)
    2021.05.30
    [2021 예비창업패키지] 2차 합격 후기 (코로나 시즌)
  • [노션]페이지 멘션과 페이지 링크 차이점
    2022.06.17
    [노션]페이지 멘션과 페이지 링크 차이점
  • [python2.7] setup.py로 배포 적용(impo⋯
    2020.12.07
    [python2.7] setup.py로 배포 적용(impo⋯
  • [3dsMax python] Menu & Macroscri⋯
    2021.02.01
    [3dsMax python] Menu & Macroscri⋯

최근 댓글

  • 안녕하세요 :) 덕분에 잘 사용했습니다. !!
    Jinwoo Choi
  • 안녕하세요 Calendar2notion 개발자 혀느현스입니⋯
    오피즈 혀느현스
  • 공감하고 가요 ^^
    아이폰 14 프로 맥스
  • 이후에 어떻게 되셨나요?
    ㅇㅇㅇㅇ

최근 글

  • 터키어 공부
    2023.03.24
  • 스타트업 대표를 이용
    2023.03.23
  • 유명대표들의 Exit 금액에서 자신이 금액을 밝힌 사람이 ⋯
    2023.03.22
  • 컴퓨터 빠르게 잘 다룬다. 근데 본질은?
    2023.03.22
    컴퓨터 빠르게 잘 다룬다. 근데 본질은?
  • gpt에게 조직문화에 대해 물어봤다.
    2023.03.22
    gpt에게 조직문화에 대해 물어봤다.
hELLO · Designed By pronist.
Jinwoo Choi

최진우 블로그

Dev/css

FLEX 서비스 css 칼라값

2023. 1. 30. 14:30
728x90

root 파일 참고용

vscode에서 보면 색상도 나옴

 

root, .t-giEBBL {
    --sizes-xsmall: 24px;
    --sizes-small: 32px;
    --sizes-default: 40px;
    --sizes-large: 48px;
    --sizes-xlarge: 56px;
    --radii-default: 8px;
    --radii-tag: 50px;
    --shadows-active: 0 0 0 4px rgba(58,151,212,.3),0 0 0 1px rgba(33,36,41,.2),0 1px 1px 0 rgba(33,36,41,0),0 6px 12px 0 rgba(33,36,41,0);
    --shadows-pageRoot: 0px 0px 12px 0px rgba(0, 0, 0, 0.04), -1px 0px 0px 0px rgba(0, 0, 0, 0.04), 0px 0px 24px 0px rgba(0, 0, 0, 0.04);
    --shadows-pageAside: inset 1px 0 0 rgba(0, 0, 0, 0.08);
    --shadows-button: 0px 2px 6px rgba(0, 0, 0, 0.02), inset 0px -1px 0px rgba(0, 0, 0, 0.06), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
    --shadows-tag: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.03);
    --shadows-tagOutline: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
    --shadows-badge: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.04);
    --shadows-radioUnselect: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.16);
    --shadows-radioSelect: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
    --shadows-checkboxUnselect: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.16);
    --shadows-checkboxSelect: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
    --shadows-popper: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 10px 14px rgba(0, 0, 0, 0.06), 0px 14px 32px rgba(0, 0, 0, 0.12);
    --shadows-inputSolid: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.04);
    --shadows-inputOutline: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
    --shadows-inputFocus: inset 0px 0px 0px 1px #07B419;
    --shadows-inputError: inset 0px 0px 0px 1px #F44712;
    --shadows-popover: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 14px 60px rgba(0, 0, 0, 0.15);
    --shadows-modal: 0px 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 24px 72px rgba(36, 42, 48, 0.22);
    --shadows-modalLeftAsideDivider: inset -1px 0px 0px rgba(0, 0, 0, 0.08);
    --shadows-modalRightAsideDivider: inset 1px 0px 0px rgba(0, 0, 0, 0.08);
    --shadows-tabActiveUnderline: inset 0px -2px 0px #242A30;
    --shadows-appShellRoot: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
    --shadows-tooltip: 0px 6px 24px rgba(0, 0, 0, 0.16), inset 0px -1px 0px rgba(0, 0, 0, 0.06), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
    --shadows-datePickerSelected: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
    --shadows-dialog: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 14px 60px rgba(0, 0, 0, 0.15);
    --zIndices-TOP_BAR: 999;
    --zIndices-SUB_NAV_BAR: 999;
    --zIndices-GNB: 1000;
    --zIndices-RIGHT_PANEL: 1000;
    --zIndices-LINEAR_MODAL: 1001;
    --zIndices-LINEAR_DROPDOWN: 1002;
    --zIndices-LINEAR_DIALOG: 1003;
    --zIndices-LINEAR_POPOVER: 1004;
    --zIndices-LINEAR_TOAST: 1005;
    --zIndices-TOP_OF_EVERYTHING: 10000;
    --zIndices-SPOTLIGHT: 1001;
    --colors-orangeLighter: #ffcec2;
    --colors-orangeLight: #f57453;
    --colors-orangeLightest: #fff7f5;
    --colors-orangeDarker: #661400;
    --colors-orangeDark: #c32700;
    --colors-orange: #f24b17;
    --colors-black010: rgba(36, 42, 48, 0.1);
    --colors-black004: rgba(36, 42, 48, 0.04);
    --colors-black016: rgba(36, 42, 48, 0.16);
    --colors-black096: rgba(36, 42, 48, 0.96);
    --colors-black080: rgba(36, 42, 48, 0.8);
    --colors-black072: rgba(36, 42, 48, 0.72);
    --colors-black064: rgba(36, 42, 48, 0.64);
    --colors-black056: rgba(36, 42, 48, 0.56);
    --colors-black048: rgba(36, 42, 48, 0.48);
    --colors-black040: rgba(36, 42, 48, 0.4);
    --colors-black024: rgba(36, 42, 48, 0.24);
    --colors-black012: rgba(36, 42, 48, 0.12);
    --colors-black008: rgba(36, 42, 48, 0.08);
    --colors-black006: rgba(36, 42, 48, 0.06);
    --colors-black: #242a30;
    --colors-black088: rgba(36, 42, 48, 0.88);
    --colors-black032: rgba(36, 42, 48, 0.32);
    --colors-black003: rgba(36, 42, 48, 0.03);
    --colors-black002: rgba(36, 42, 48, 0.02);
    --colors-black001: rgba(36, 42, 48, 0.01);
    --colors-black020: rgba(36, 42, 48, 0.2);
    --colors-cosmicBlueDark: #2e5e87;
    --colors-cosmicBlueLightest: #f2f6f9;
    --colors-cosmicBlueLighter: #c4d9eb;
    --colors-cosmicBlueLight: #80add3;
    --colors-cosmicBlueDarker: #1b3750;
    --colors-cosmicBlue: #3b86c8;
    --colors-purpleLighter: #ddcced;
    --colors-purpleLightest: #faf5ff;
    --colors-purpleLight: #aa7ad9;
    --colors-purpleDarker: #361853;
    --colors-purpleDark: #5b288d;
    --colors-purple: #8f40de;
    --colors-yellowLightest: #fffcf2;
    --colors-yellowLighter: #ffeebd;
    --colors-yellowLight: #ffd454;
    --colors-yellow: #fab300;
    --colors-yellowDark: #b57700;
    --colors-yellowDarker: #704300;
    --colors-flame: linear-gradient(96.77deg, #f96a19 -0.96%, #fb60bd 100%);
    --colors-tropical: linear-gradient(96.77deg, #04cc00 -0.96%, #12c2cd 100%);
    --colors-magic: linear-gradient(96.77deg, #9d3cff -0.96%, #6066ff 100%);
    --colors-mango: linear-gradient(96.77deg, #fa9e00 -0.96%, #ff8e26 100%);
    --colors-white: #ffffff;
    --colors-white088: rgba(255, 255, 255, 0.88);
    --colors-white080: rgba(255, 255, 255, 0.8);
    --colors-white072: rgba(255, 255, 255, 0.72);
    --colors-white064: rgba(255, 255, 255, 0.64);
    --colors-white056: rgba(255, 255, 255, 0.56);
    --colors-white048: rgba(255, 255, 255, 0.48);
    --colors-white040: rgba(255, 255, 255, 0.4);
    --colors-white032: rgba(255, 255, 255, 0.32);
    --colors-white028: rgba(255, 255, 255, 0.28);
    --colors-white024: rgba(255, 255, 255, 0.24);
    --colors-white020: rgba(255, 255, 255, 0.2);
    --colors-white016: rgba(255, 255, 255, 0.16);
    --colors-white012: rgba(255, 255, 255, 0.12);
    --colors-white010: rgba(255, 255, 255, 0.1);
    --colors-white008: rgba(255, 255, 255, 0.08);
    --colors-white006: rgba(255, 255, 255, 0.06);
    --colors-white004: rgba(255, 255, 255, 0.04);
    --colors-white003: rgba(255, 255, 255, 0.03);
    --colors-white096: rgba(255, 255, 255, 0.96);
    --colors-white001: rgba(255, 255, 255, 0.01);
    --colors-white002: rgba(255, 255, 255, 0.02);
    --colors-magentaLightest: #fef6f9;
    --colors-magentaLighter: #facddd;
    --colors-magentaLight: #f584ad;
    --colors-magentaDarker: #651e38;
    --colors-magentaDark: #aa325e;
    --colors-magenta: #f04785;
    --colors-greenLighter: #b7e8bd;
    --colors-greenLight: #59cd65;
    --colors-greenDarker: #034c0b;
    --colors-greenDark: #058012;
    --colors-green: #07b419;
    --colors-greenLightest: #f6fdf7;
    --colors-grayLightest: #f8f9fa;
    --colors-grayLighter: #cdd2d6;
    --colors-grayLight: #8d96a1;
    --colors-grayDarker: #242a30;
    --colors-grayDark: #3c4651;
    --colors-gray: #556372;
    --colors-goldLight: #d6a754;
    --colors-goldDarker: #513400;
    --colors-goldDark: #8a5700;
    --colors-gold: #cf7800;
    --colors-goldLighter: #ecd8b6;
    --colors-goldLightest: #fcfbf7;
    --colors-cyanLighter: #b4edec;
    --colors-cyanDarker: #005352;
    --colors-cyanLightest: #f2fdfd;
    --colors-cyanDark: #03706e;
    --colors-cyanLight: #55d9d7;
    --colors-cyan: #01c6c3;
    --colors-blueLightest: #f5fbff;
    --colors-blueLighter: #c2e3ff;
    --colors-blueLight: #54a6ee;
    --colors-blueDarker: #102a5c;
    --colors-blueDark: #1545a1;
    --colors-blue: #2161dc;
    --colors-primaryDarker: #034c0b;
    --colors-primaryDark: #058012;
    --colors-primaryLighter: #b7e8bd;
    --colors-primaryLight: #59cd65;
    --colors-primary: #07b419;
    --colors-primaryLightest: #f2fdf3;
    --colors-background: #fdfdfd;
    --colors-overlayLight: rgba(240, 240, 240, 0.85);
    --colors-overlayDark: rgba(36, 42, 48, 0.5);
728x90
    'Dev/css' 카테고리의 다른 글
    • 이미지 width: 100% 일때 비율 유지하면서 height 설정
    • sticky 는 근접한 부모가 아니고, 그냥 부모야
    • css sticky 안먹는 경우
    • flex 사파리에서 row-gap column-gap 갭 안먹음 ㅡㅡ
    Jinwoo Choi
    Jinwoo Choi
    Be Übermensch! 안녕하세요, 최진우입니다 :) 개발, 비지니스 인사이트 글을 가볍게 작성합니다. The journey is the reward.
    댓글쓰기
    이전 글
    이미지 width: 100% 일때 비율 유지하면서 height 설정

    티스토리툴바